目前我已经知道了,每当我在应用程序中进行更改以查看我要运行gulp build的更改时,如何通过添加监视任务来改进此gulp文件,以便它自动检测到已经引入了更改在js文件夹/ html文件中的某个地方,它会自动为我运行构建任务。
var gulp = require('gulp'),
csso = require('gulp-csso'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
ngAnnotate = require('gulp-ng-annotate'),
minifyHtml = require("gulp-minify-html"),
ngHtml2Js = require('gulp-ng-html2js');
gulp.task('build', function () {
gulp.src(['../css/bootstrap_min.css', '../css/inputs.css', '../css/main.css',
'../css/recording.css','../css/images.css','../css/responsive.css','../css/calendar.css'])
.pipe(concat('index.min.css'))
.pipe(csso())
.pipe(gulp.dest('../css/'));
gulp.src(['../lib/date.js', '../lib/angular/angular-1.2.17.js','../lib/angular/angular-resource.js',
'../lib/ui-bootstrap-tpls-0.11.0.js','../lib/angular-ui-router.js',
'../lib/underscore.min.js','../lib/sortable.js','../lib/localize.js','../lib/bindonce.min.js',
'../lib/screenfull.js', '../lib/zeroclipboard.min.js'])
.pipe(concat('libs.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('../lib'));
gulp.src(['../js/app.js','../js/services.js','../js/controllers.js','../js/filters.js','../js/directives.js'])
.pipe(concat('index.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('../js'));
gulp.src("../partials/*.html")
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: "Partials",
prefix: "partials/"
}))
.pipe(concat("partials.min.js"))
.pipe(uglify())
.pipe(gulp.dest("../js"));
});
gulp.task('partials', function () {
gulp.src("../partials/*.html")
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: "Partials",
prefix: "partials/"
}))
.pipe(concat("partials.min.js"))
.pipe(uglify())
.pipe(gulp.dest("../js"));
});
你可以像这样添加watch
任务
gulp.task('watch', function() {
gulp.watch('../js/**/*.js', ['build']);
gulp.watch('../css/**/*.css', ['build']);
gulp.watch('../partials/**/*.html', ['build']);
})
希望这有帮助!
other answer适用于旧版本的gulp。版本4.0中的语法已更改。
gulp.task('watch', function() {
gulp.watch('../js/**/*.js', gulp.series('build'));
gulp.watch('../css/**/*.css', gulp.series('build'));
gulp.watch('../partials/**/*.html', gulp.series('build'));
})