前端自动化构建（gulp）

Posted 2021-07-03 你好旧时光丫

我很快乐-刘惜君 00:00 03:33 后退15秒 倍速 快进15秒

安装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' ))