我想用gulp构建代码并跟踪所有更改并重新构建并重新加载浏览器,为此我在gulpfile.js中编写了以下代码。所有方法都起作用,但 watch()在源更改。 我想对文件gulp中所做的更改构建所有代码并自动刷新浏览器。 请帮忙。 我的gulp版本是
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
const terser = require('gulp-terser');
let babel = require('gulp-babel');
const del = require('del');
var replace = require('gulp-replace');
var webserver = require('gulp-webserver');
var debug = require('gulp-debug');
var inject = require('gulp-inject');
//var series = require('stream-series');
var runSequence = require('run-sequence');
var browsersync = require("browser-sync").create();
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./build/"
},port: 3000
});
done();
}
// BrowserSync Reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
function clean() {
return del('build/**',{ force: true });
}
// Sass task: compiles the style.scss file into style.css
function libraryCSS() {
return gulp.src(['css files'])
.pipe(cssnano())
.pipe(debug())
.pipe(concat('library.style.min.css'))
.pipe(replace('../webfonts','./webfonts'))
.pipe(gulp.dest('build'))
//.pipe(browsersync.stream());
// put final CSS in dist folder
}
function libraryCSSFont() {
return (
gulp.src(['plugins/fontawesome-free/webfonts/*'])
.pipe(debug())
.pipe(gulp.dest('build/webfonts'))
// .pipe(browsersync.stream())
);
}
function templateCustomCSS() {
return (
gulp.src(['dist/css/adminlte.min.css'])
.pipe(cssnano())
.pipe(debug())
.pipe(concat('template-custom.style.min.css'))
.pipe(gulp.dest('build'))
//.pipe(browsersync.stream())
);
}
function libraryJS() {
return (
gulp.src(['js files'])
.pipe(concat('plaugin-library.js'))
//.pipe(uglify())
.pipe(debug())
.pipe(terser())
.pipe(gulp.dest('build'))
//.pipe(browsersync.stream())
);
}
function templateCustomJS() {
return (
gulp.src(['another set of js files'])
.pipe(concat('template-custom-js.js'))
//.pipe(uglify())
.pipe(debug())
.pipe(terser())
.pipe(gulp.dest('build'))
//.pipe(browsersync.stream())
);
}
// JS task: concatenates and uglifies JS files to script.js
function frameworkGlobalJS() {
return (
gulp.src(['scripts/config.js','scripts/00.global.js'])
.pipe(concat('framework-global-js.js'))
//.pipe(uglify())
.pipe(debug())
.pipe(terser())
.pipe(gulp.dest('build'))
//.pipe(browsersync.stream())
);
}
function frameworkScripts() {
return gulp.src(['js files'])
.pipe(babel({
presets: ['@babel/env'],}))
.pipe(concat('framework-scripts.js'))
.pipe(debug())
.pipe(terser())
.pipe(gulp.dest('build'))
// .pipe(browsersync.stream())
}
function copystaticAsets() {
return (
gulp.src(['dist/img/*'])
.pipe(debug())
.pipe(gulp.dest('build/dist/img'))
//.pipe(browsersync.stream())
);
}
function copypage() {
return (
gulp.src(['index.html','login.html','favicon.ico'])
.pipe(debug())
.pipe(gulp.dest('build'))
//.pipe(browsersync.stream())
);
}
function copypages() {
return (
gulp.src(['pages/**/*'])
.pipe(debug())
.pipe(gulp.dest('build/pages'))
//.pipe(browsersync.stream())
);
}
gulp.task('webserver',function () {
gulp.src('build')
.pipe(webserver({
port: 3000,livereload: {
enable: true,// need this set to true to enable livereload
filter: function (fileName) {
if (fileName.match(/.map$/)) { // exclude all source maps from livereload
return false;
} else {
return true;
}
}
},directoryListing: {
enable: false,path: 'build'
},//host:'0.0.0.0',open: true,fallback: 'index.html'
}));
});
gulp.task('watchTask',function(){
gulp.watch(['scripts/config.js','scripts/00.global.js','scripts/AmountInWord.js','scripts/api-call.js','scripts/common.js','scripts/dashboard.js','scripts/**/*.js','index.html','favicon.ico','pages/**/*'],gulp.series(
gulp.parallel(libraryCSS,libraryCSSFont,templateCustomCSS,libraryJS,templateCustomJS,frameworkGlobalJS,frameworkScripts,copystaticAsets,copypage,copypages),'webserver','watchTask'
)
);
})
exports.default = gulp.series(
clean,gulp.parallel(
libraryCSS,'watchTask'
);