Writing gulpfile.js without using run()

Question

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

The docs explain how to use gulp.watch without using run. Gulp is relatively new, and still under development. You need to be willing to read a lot of source code to use it. This is the wrong place for "I'm new, help me" questions. Try Reddit or another forum-like environment. — OverZealous
– OverZealous, Commented Feb 18, 2014 at 19:56
Sorry if I wasted your time or misunderstood the concept of StackOverflow. I've actually been reading the docs, but haven't been able to turn the (very short) instructions into actual functioning code. Would you have reacted the same way if I skipped the whole "I'm new" part? I still have this problem, whether I'm a veteran or newbie. This seemed like a really nice community with skilled people and I needed some actual human input. Point taken though. — Apansson
– Apansson, Commented Feb 19, 2014 at 9:02

Scott Puleo · Accepted Answer · 2014-02-26 22:53:53Z

3

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']); 

});

edited Feb 26, 2014 at 22:53

answered Feb 18, 2014 at 21:23

Scott Puleo

3,68426 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Apansson Over a year ago

So, when you go gulp watch, it will run all that the function contains. Does scripts: './lib/**/*.js' watch for all folders under lib, and all js-files in those folders? How would I declare a destination that follows the same folder structure? Thanks for your answer and sorry if I'm asking "obvious" questions, I just want to have a real understanding of the concept and not make assumptions.

Scott Puleo Over a year ago

Gulp uses a concept called globbing. The ** is a glob-star and performs a recursive match on 0 or more directory levels. This means that ./lib/**/.js will match /lib/foo.js as well as /lib/models/helpers/bar.js. As for destinations you will need to specify an actual path but you can have more than one defined for your task.

Collectives™ on Stack Overflow

Writing gulpfile.js without using run()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related