gulp无法正常工作

Question

I have a few questions regarding my gulpfile.js setup.

Here is my gulp file setup:

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

var preserveFirstComment = function() {
    var set = false;

    return function() {
        if (set) return false;
            set = true;
            return true;
    };
};

    gulp.task('styles', function() {
    return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css/'));
});

    gulp.task('styles:watch', function() {
    gulp.watch('sass/**/*.scss',['styles']);
});

    gulp.task('uglify', function() {
        gulp.src('lib/marked.js')
            .pipe(uglify({preserveComments: preserveFirstComment()}))
            .pipe(concat('marked.min.js'))
            .pipe(gulp.dest('.'));
    });

gulp.task('default', ['uglify']);

Once I try to run the my project with gulp all it does is run these 5 lines below and then stops and goes back to the command line prompt. I don't understand why this is happening. I am a beginner in using gulp as this is just a basic setup from a tutorial I used to setup my project.

C:\Users\Gemini\Documents\workspace\ca_>gulp
[20:28:16] Using gulpfile ~\Documents\workspace\ca_\Gulpfile.js
[20:28:16] Starting 'uglify'...
[20:28:16] Finished 'uglify' after 21 ms
[20:28:16] Starting 'default'...
[20:28:16] Finished 'default' after 13 μs

C:\Users\Gemini\Documents\workspace\ca_>

Link: Getting Started with Gulp

Answer 1

When you only enter gulp on the command line Gulp executes the default task which in your case depends on the uglify task and not on styles:watch . That's why you only see uglify and default in Gulp's output.

If you want to execute the styles:watch task you have to tell Gulp explicitly so:

C:\Users\Gemini\Documents\workspace\ca_> gulp styles:watch

Answer 2

To add to Sven's answer above, you can add many Gulp tasks to start watching on a gulp watch command.

gulp.task('watch', function() {
   gulp.watch('./css/', ['styles']);
   gulp.watch('.', ['uglify']);
   // more watch things here
});

Answer 3

To run a gulp task, the command used is gulp <TASK NAME> and when we run just gulp , the default task is run. If, in case a default task is not defined, an error is shown mentioning Task 'default' is not in your gulpfile .

In this case, gulp runs the default task which is 'uglify' and that is the reason why you are not able to watch the changes in the SASS. For watching the changes in the SASS, you could modify the default task to:

gulp.task('default', ['uglify', 'styles:watch']);

This would help you out.