前端自动化构建（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");			//压缩js
const conact  = require("gulp-concat");			//合并文件
const less  = require("gulp-less");				//处理less
const minifyCSS  = require("gulp-cssnano");		//压缩css
const 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'
    )
)