javascript - gulp 监听有一个地方搞不懂。比如写sass的时候，每次都要在命令行中输入gulp，怎么才能自动更新

Question

// 引入 gulp
var gulp = require('gulp');

var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var spriter = require("gulp-spriter");

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

gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));

});

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

gulp.src('./src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'));

});

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

gulp.src('./src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/js'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));

});

gulp.task("css",["clean"],function(){

return gulp.src("./dist/css/*.css")
           .pipe(spriter({
                sprite: "test.png",
                slice:"./src/img",
                outpath:"./dist/img"
           }))
           .pipe(gulp.dest('./dist/css'));

});

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

gulp.run('lint', 'sass', 'scripts');

gulp.task('watch', function() {
    gulp.watch('./src/js/*.js', ['lint','sass','scripts']);
});

});

附上gulpfile.js , 还有一点疑惑就是使用gulp，项目的文件结构树应该怎样才合理,我现在的结构是这样

dist下有 css img js
src 下有 sass img js

Answer 1

修正 ＋ 补充：

首先的sass任务改一下：

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

再改css：

//css依赖sass，因为不知道你的clean是什么东西，我去掉了
gulp.task("css", ["sass"],function(){

    return gulp.src("./dist/css/*.css")
           .pipe(spriter({
                sprite: "test.png",
                slice:"./src/img",
                outpath:"./dist/img"
           }))
           .pipe(gulp.dest('./dist/css'));
});

其次，再把default改改：

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

    gulp.run('lint', 'css', 'scripts');

    gulp.task('watch', function() {
        gulp.watch('./src/js/*.js', ['lint', 'scripts']);
        gulp.watch('./src/sass/*.scss', ['css']);
    });
});