Глоток компиляция SLIM/SASS/CoffeeScript на лета

Question

Существует следующий Глоток файл с заданиями:

// 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 в моей фронтальной работе. Но я должен сделать «gulp clean build» после каждого изменения, чтобы перевести SLIM в HTML, SASS в CSS, Coffee в JS. Я хочу сделать любые изменения и просто обновить страницу в браузере. Как мне это сделать? Заранее спасибо!

Answer 1

Вы должны поставить наблюдателей на ваши файлы:

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.