0

前端自动化构建（gulp）

 4 weeks ago
source link: https://blog.51cto.com/lingpingM/10519411
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

前端自动化构建（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'
    )
)
  • 赞
  • 收藏
  • 评论
  • 分享
  • 举报

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK