前端自动化构建（gulp）
安装gulp
//全局安装npm i gulp-cli -g//本地安装npm i gulp//检测版本gulp --version
本地gulp
本地Gulp有两个作用：
加载和运行Gulpfile中的构建指令
暴露API供Gulpfile使用
本地Gulp是真正运行构建任务的程序，全局Gulp只是用来启动各个项目中的本地Gulp
创建Gulpfile.js
const gulp = require("gulp");//创建任务gulp.task('test',()=>{console.log('Hello World!');})//执行任务gulp test
task的具体流程
全局Gulp CLI加载本地Gulp
本地Gulp加载Gulpfile
Gulpfile加载本地Gulp，然后定义一个名为test的task
本地Gulp接收到一个命令参数，也就是要执行的task的名字
本地Gulp发现确实有一个task叫这个名字，于是执行了这个task所绑定的函数
流的使用
通过Gulp可以读取文件内容，然后把它转换成特定的形式，最后把众多js文件合并成一个文件。
读：gulp.src
写：gulp.dest
const gulp = require("gulp");gulp.task('copy', () => {gulp.src('./index.html').pipe(gulp.dest('dist'))})gulp copy
这样就会把文件输出到指定目录，这个目录是相对于Gulpfile所处的位置，目录不存在则会创建
技巧：
有时候不知道文件具体的名字，所以就可以使用glob来定义匹配规则。
app/*.html：这种只有一个通配符，它只能够匹配到app目录下所有的html文件
app/**/*.html：有两个通配符可以匹配目录中的0个或者多个子目录
使用Gulp插件
压缩
npm i uglify
const gulp = require("gulp");const uglify = require("gulp-uglify");gulp.task('scripts', () => {return gulp.src('./demo.js').pipe(uglify()).pipe(gulp.dest('dist'))})
合并
npm i gulp-concat
const gulp = require("gulp");const uglify = require("gulp-uglify");const contact = require("gulp-concat");gulp.task('scripts', () => {return gulp.src('./src/*.js').pipe(contact('bundle.js')) //接受参数，合并后的文件名.pipe(uglify()).pipe(gulp.dest('dist'))})
链式调用
const gulp = require("gulp");const uglify = require("gulp-uglify"); //压缩jsconst conact = require("gulp-concat"); //合并文件const less = require("gulp-less"); //处理lessconst minifyCSS = require("gulp-cssnano"); //压缩cssconst prefix = require("gulp-autoprefixer"); //自动添加浏览器前缀gulp.task('scripts',()=>{return gulp.src('./src/*.js').pipe(conact('main.min.js')).pipe(uglify()).pipe(gulp.dest('dist/js'))})gulp.task('styles',()=>{return gulp.src('./src/index.less').pipe(less()).pipe(minifyCSS()).pipe(prefix()).pipe(gulp.dest('dist/css'))})
重置文件
每次构建的时候清除上一次构建的文件
const gulp = require("gulp");const del = require("del");gulp.task('clean',()=>{return del(['dist']) //调用之前引入的del包})
del接受的第一个参数是一个数组，这个数组由要删除的文件的匹配规则构成
知识点： 在执行任务的时候，需要结束task，Did you forget to signal async completion?，我之前都是用return来结束任务，同样task接收一个done参数，最后执行这个回调函数
gulp.task('clean',(done)=>{done()})
顺序和并行执行task
顺序
gulp.series：这个函数用来顺序执行task，它可以接受无限个参数，参数可以是字符串或者函数
const gulp = require("gulp");const concat = require("gulp-concat");const del = require("del");gulp.task('clean',()=>{return del(['dist'])})gulp.task('scripts',gulp.series('clean',()=>{return gulp.src('./src/*.js').pipe(concat('main.js')).pipe(gulp.dest('dist'))}))//执行scripts时会先执行clean，这样顺序执行
并行
gulp.parallel：会产生多个进程来同时执行task
代码解读：创建了一个新的任务，需要按顺序先执行clean，然后在同步执行scripts、styles
gulp.task('default',gulp.series('clean',gulp.parallel('scripts','styles')))
同时你可以在命令行中运行gulp来调用新的default task，Gulp会自动寻找default task并执行它
创建服务
npm i browser-sync
代码解释：可以看出创建许多的task任务，怎么把这些任务组合到一起很关键
在default这个任务中使用了gulp.series这个可以顺序执行任务，接收多个参数，所以会首先执行clean任务删除文件夹，然后并行执行styles、scripts、copy处理文件，紧接着执行server任务开启服务器，最后执行watcher任务监听文件并执行对应的任务
注意：这里使用了很多任务，每个任务需要使用done回调函数，不然会卡住，无法执行其它函数
const gulp = require("gulp");const bSync = require("browser-sync");const del = require("del");const uglify = require("gulp-uglify");const conact = require("gulp-concat");const less = require("gulp-less");const minifyCSS = require("gulp-cssnano");const prefix = require("gulp-autoprefixer");gulp.task('copy',()=>{return gulp.src('./src/index.html').pipe(gulp.dest('dist'))})gulp.task('scripts',()=>{return gulp.src('./src/*.js').pipe(conact('main.min.js')).pipe(uglify()).pipe(gulp.dest('dist/js'))})gulp.task('styles',()=>{return gulp.src('./src/index.less').pipe(less()).pipe(minifyCSS()).pipe(prefix()).pipe(gulp.dest('dist/css'))})//创建服务器，管理dist文件夹//详细配置请看官网 https://browsersync.io/gulp.task('server',(done)=>{bSync({server:{baseDir:['dist']}})done()})gulp.task('clean',()=>{return del('dist')})gulp.task('watcher', (done) => {gulp.watch(['./src/*.js'],gulp.parallel('scripts'));gulp.watch('./src/index.less',gulp.parallel('styles'));gulp.watch(['./src/index.html'],gulp.parallel('copy'));gulp.watch('dist/**/*',bSync.reload);done()})gulp.task('default',gulp.series('clean',gulp.parallel('styles', 'scripts', 'copy'),'server','watcher'))