一口气吞下SLIM/SASS/CoffeeScript

有以下包含任务的Gulp文件：

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

// plugins
var connect = require('gulp-connect');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var clean = require('gulp-clean');
var slim = require('gulp-slim');
var coffee = require('gulp-coffee');
var sass = require('gulp-sass');

// tasks
gulp.task('lint', function() {
  gulp.src(['./app/**/*.js', '!./app/bower_components/**'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(jshint.reporter('fail'));
});

gulp.task('clean', function() {
    gulp.src('./dist/*')
      .pipe(clean({force: true}));
});

gulp.task('minify-css', function() {
  var opts = {comments:true,spare:true};
  gulp.src(['./app/**/*.scss', '!./app/bower_components/**'])
    .pipe(sass())
    .pipe(minifyCSS(opts))
    .pipe(gulp.dest('./dist/'))
});

gulp.task('minify-js', function() {
  gulp.src(['./app/**/*.coffee', '!./app/bower_components/**'])
    .pipe(coffee({bare: true}))
    .pipe(uglify({
      // inSourceMap:
      // outSourceMap: "app.js.map"
    }))
    .pipe(gulp.dest('./dist/'))
});

gulp.task('copy-bower-components', function () {
  gulp.src('./app/bower_components/**')
    .pipe(gulp.dest('dist/bower_components'));
});

gulp.task('copy-html-files', function () {
  gulp.src('./app/**/*.slim')
    .pipe(slim({ pretty: true }))
    .pipe(gulp.dest('dist/'));
});

gulp.task('connect', function () {
  connect.server({
    root: 'app/',
    port: 8888
  });
});

gulp.task('connectDist', function () {
  connect.server({
    root: 'dist/',
    port: 9999
  });
});


// default task
gulp.task('default',
  ['lint', 'connect']
);
// build task
gulp.task('build',
  ['lint', 'minify-css', 'minify-js', 'copy-html-files', 'copy-bower-components', 'connectDist']
);

---

我想在前端工作中使用SLIM/SASS/CoffeeScript。但我必须在每次更改后进行“GulpCleanBuild”，以便将SLIM转换为HTML、SASS转换为CSS、Coffee转换为JS。我想做任何更改，只需在浏览器中刷新页面。我怎么做？提前谢谢

您需要在您的文件上放置监视程序：

gulp.task('watch', ['build','connectDist'], function() {
    gulp.watch(['./app/**/*.coffee', '!./app/bower_components/**'], ['minify-js']);
    gulp.watch(['./app/**/*.scss', '!./app/bower_components/**'], ['minify-css']);
    gulp.watch('./app/**/*.slim', ['copy-html-files']);
})

如果启动

gulp watch

，首先执行

build

和

connectDist

任务，准备生成目录。然后，三个观察者查看您的主要输入文件，并在发生更改时调用相关任务

请注意，我调用了

connectDist

任务，而不是

connect

任务，这主要是因为所有浏览器可读文件都存储在

dist

中