环境版本:
- node版本:v12.2.0
- npm版本:6.9.0
- gulp版本: 4.0.2(node的12.0以上版本需要gulp4.0以上版本,不然会有许多不兼容问题)
- gulp-cli : 2.2.0
- gulp-connect:5.7.0
gulp4.0简单使用:
gulp4.0与其它低版本的用法有些不一样,这里不做比较,只介绍部分新用法
- npm init 初始化项目,生成 package.json
- 新建gulpfile.js文件
// 以下代码会执行在node环境下
const gulp = require( "gulp" ),
connect = require('gulp-connect');
// 在命令行使用 gulp watch 启动此任务
gulp.task('watch', function () {
// 监听文件修改,当文件被修改则执行 html 任务
gulp.watch('./app/js/*.js', gulp.series('js') );
gulp.watch('./app/css/*.css', gulp.series('css'));
gulp.watch('./app/html/index.html', gulp.series('html') ); // gulp4.0任务统一使用回调函数,不再支持 ['html'] 这种形式
})
gulp.task('html',function(){
return gulp.src('./html/*.html')
.pipe(gulp.dest('dist/html')) // 生成静态文件
.pipe(connect.reload()); // 刷新浏览器
})
gulp.task('js',function(){
return gulp.src('./app/js/*.js').pipe(connect.reload());
});
gulp.task('css',function(){
return gulp.src('./app/css/*.css').pipe(connect.reload());
});
gulp.task('webserver', function() {
connect.server({
root: './app/',
livereload: true,// 自动刷新
port: 2333
});
});
// 开启default任务,管理其他任务
gulp.task('default',gulp.series(gulp.parallel('webserver','watch','html')))
- 在浏览器中访问:http://localhost:2333/html/ ,编辑index.html文件保存后会发现浏览器自动刷新