CODEWITHSUNDEEP
javascriptdependenciesgulp
Apansson
Apansson

Reputation: 104

Writing gulpfile.js without using run()

I'm new to the scene of JavaScript development and am currently in the progress of getting a decent workflow going. I'm having some trouble understanding how Gulp works though. I've installed my dependencies using npm, and written a gulpfile as far as my capabilities goes.

var gulp = require('gulp'), 
minifycss = require('gulp-minify-css'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
minifyhtml = require('gulp-minify-html'),
sass = require('sass'),
notify = require('gulp-notify');

gulp.task('js', function() {
    return gulp.src('js/**/*.js')
        .pipe(uglify({
            outSourceMap: true
        }))
        .pipe(gulp.dest('dist/assets/js'));
});

//This task should compile my scss-files into corresponding css-files in the css-folder. 
//If possible I would like to have it automatically detect which folder the file is in. 
//Ie: scss/user/main.scss should compile to css/user/main.css
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
});

gulp.task('css', function() {
    return gulp.src('css/*.css')
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios     6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/assets/css'));
});

//This task should check all html-files in directory, and then minify them into     corresponding folders in dist/assets/html. 
//Ie: html/user/index.html should be minified into dist/assets/html/user/index.html.
gulp.task('html', function() {
    return gulp.src('html/*/*.html')
        .pipe(minifyhtml())
        .pipe(gulp.dest('dist/assets/html'));
});

//I know run() is depreceated. What to do? How should these be written?
gulp.task('default', function() {
    gulp.watch('scss/*.scss', function() {
        gulp.run('sass')
    });
    gulp.watch(['html/user/*.html', 'html/support/*.html'], function() {
        gulp.run('html');
    });
    gulp.watch('js/**/*.js', function() {
        gulp.run('js');
    });
    gulp.watch('css/*.css', function() {
        gulp.run('css');
    });
});

It doesn't really work as I want to though, and googling while not knowing what to search for is really hard. I've read several blogs, but unfortunately haven't been able to grasp how to do it. I'm aware that I shouldn't use run(), but how should I be writing the code then?

If someone could explain what a dependency actually is, in plain English, I would be really grateful. At sea on this one as well.

Thanks for taking the time.

Anton

Upvotes: 2

Views: 1080

Answers (1)

Scott Puleo
Scott Puleo

Reputation: 3684

You can use the built in gulp.watch method. One of the benefits of gulp is that you can declare common tasks as functions then reuse them.

Here is an example of the syntax:

var paths = {
  scripts: './lib/**/*.js',
  tests: './test/**/*.js'
};

function lint(src){
  return gulp.src(src)
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter(stylish));
}

gulp.task('lint', function () { 
  lint([paths.scripts, paths.tests]);
});

gulp.task('test', function() { 
  // put your test pipeline here
});

gulp.task('watch', function () {

  // watch and lint any files that are added or changed
  gulp.watch([paths.scripts, paths.tests, paths.demo], function(event){
    if(event.type !== 'deleted') { 
      lint([event.path]); 
    }
  });

  // run all the tests when something changes
  gulp.watch([paths.scripts, paths.tests], ['test']); 

});

Upvotes: 3

Related Questions