1.gulp的简介
1.gulp中文文档(www.gulpjs.com.cn/)
2.简单，高效，实用，node最佳实践，生态丰富
2.gulp的安装
$ npm install --global gulp-cli
$ gulp --version
3.gulp配置文件 ：gulpfile.js（gulp.js - 基于流(stream)的自动化构建工具 | gulp.js中文网 (gulpjs.com.cn)）
4.gulp工作流
创建任务(task)->输入文件(source)->处理文件(todo)->输出(dest)
5.gulp实现自动化
-
创建目录gulp-demo
-
初始化npm init-y
-
安装开发依赖：
$ npm install -D gulp
$ npm install -D gulp-uglify gulp-sass sass node-sass gulp-clean gulp-load-plugins browser-sync
-
创建gulp配置文件gulpfile.js
-
创建需要处理的文件目录app,子目录js/index.js,css/index.sass
gulpfile.js
const {src,watch,series,dest} = require('gulp')
const sass = require('gulp-sass')(require('sass'));
const clean =require("gulp-clean")
const browserSync = require('browser-sync').create()
const reload = browserSync.reload; // 重新加载
// const uglify = require("gulp-uglify")
// gulp-uglify => plugins.uglify =>require("gulp-uglify")
const plugins = require('gulp-load-plugins')() // gulp插件可以使用 plugins-xxx 的方式引入
// 处理html
function html(cb) {
console.log("html task");
cb()
}
// 处理css
function css(cb) {
console.log("css task");
src('app/css/*.sass')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(dest('output/css'))
.pipe(reload({
stream:true
}))
cb()
}
// 处理js任务
function js(cb) {
console.log("js task");
src('app/js/*.js')
.pipe(plugins.uglify())
.pipe(dest('output/js'))
.pipe(reload({
stream:true
}))
cb()
}
//监考文件变动
function watcher(cb){
console.log("watcher task");
watch('app/js/*.js',js,)
watch('app/css/*.sass',css)
cb()
}
// 清除dist
function cleantask(cb){
console.log("clean task");
src('output/',{ read: false, allowEmpty: true })
.pipe(clean({ allowEmpty: true }))
cb()
}
//开启server
function serve(cb){
browserSync.init({
server: {
baseDir: "./"
}
});
cb()
}
exports.html = html;
exports.css = css;
exports.js = js;
exports.cleantask = cleantask;
exports.serve = serve;
exports.watcher = watcher;
exports.default = series([cleantask,html,css,js,serve,watcher]); // 将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行
6.gulp实现热更新
const browserSync = require('browser-sync').create()
const reload = browserSync.reload; // 重新加载
// 处理js任务
function js(cb) {
console.log("js task");
src('app/js/*.js')
.pipe(plugins.uglify())
.pipe(dest('output/js'))
.pipe(reload({
stream:true
}))
cb()
}
//开启server
function serve(cb){
browserSync.init({
server: {
baseDir: "./"
}
});
cb()
}
exports.default = series([cleantask,html,css,js,serve,watcher]);
7.总结
1.相比较webpack，个人觉得配置起来更简单灵活，如果项目不是很复杂，又需要构建，gulp也是一个不错的选择。
2.以任务的形式处理资源文件，一个方法代表一个处理的资源。可以单独处理，也可以一起集中处理。cb() 回调是类似与async await的形式，保证当前任务处理完在处理下一任务。
3.提供了处理任务的各种形式的api,如parallel() 将任务功能和/或组合操作组合成同时执行的较大操作，如series() 将任务功能和/或组合操作组合成同时执行的较大操作。
