Gulp 自动化构建

秒速五厘米 2022-05-26 10:13 240阅读 0赞

## Gulp 自动化构建 ##

[use-gulp][]

[官网][Link 1]

### gulp 可以做什么? ###

1.  编译 sass
2.  合并优化压缩 css
3.  校验压缩 js
4.  优化图片
5.  添加文件指纹（md5）
6.  组件化头部底部（include html）
7.  实时自动刷新…
    
    gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。
    
    通过各种插件, 配置任务task , 完成需要

### 安装 ###

1.  全局安装
    
    npm install gulp -g
2.  局部安装
    
    npm i -D gulp

### gulp的插件 ###

这里列举比较常用的插件:

*  gulp-less // less文件编译成css
 *  gulp-clean-css // 压缩css文件
 *  gulp-csso // 压缩优化css
 *  gulp-babel /// 将ES6代码编译成ES5。
 *  gulp-uglify // 压缩js文件
 *  gulp-imagemin // 压缩图片
 *  gulp-html-minify // 压缩HTML
 *  gulp-htmlmin // 压缩html
 *  gulp-filter // 在虚拟文件流中过滤文件
 *  gulp-concat // 合并文件
 *  gulp-rename // 重命名文件
 *  gulp-clean // 清理文件 可以用 del 替代
 *  gulp-notify // 当发生异常时提示错误
 *  gulp-plumber // 当发生异常时提示错误

比较特殊的  
\- gulp-load-plugins

var $ = require('gulp-load-plugins')(); $ 是一个对象,加载了依赖里的插件 通过$.xxx使用插件

*  gulp-livereload // 网页自动刷新
 *  gulp-webserver // 本地服务器

**参考网站**  
**[https://blog.csdn.net/qq\_27626333/article/details/78006271][https_blog.csdn.net_qq_27626333_article_details_78006271]**

**gulp插件网站**  
**[https://gulpjs.com/plugins/][https_gulpjs.com_plugins]**

### gulp api ###

#### gulp.src( ) ####

一般直接写文件路径, 通过 \* 通配符来通配全部文件

#### gulp.dest(path\[, options\]) ####

输出到文件夹 , 文件夹不存在将会自动创建

#### gulp.task(name\[, deps\], fn) ####

核心 , 配置一个任务 执行一连续的操作

name  
任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

deps  
类型： Array  
一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

fn  
该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

#### gulp.watch( ) ####

gulp.watch(glob \[, opts\], tasks) 或 gulp.watch(glob \[, opts, cb\]

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
    watcher.on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    
    // 其他写法
    
    gulp.watch('js/**/*.js', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });

### 配置任务 ###

这里以使用gulp-less文件编译less文件做例子

在项目根路径下 创建gulpfile.js 文件

var gulp = require('gulp')
    
    // less文件编译成css
    var less = require('gulp-less') 
    
    gulp.task('lessTask', function() { 
    
        // 链式编程 以流的形式传递数据
        gulp.src('src/less/*.less') // 找到文件
            .pipe(rename({ suffix: '.min' })) // 重命名
            .pipe(less()) // 将less文件编译成css
            .pipe(gulp.dest('dist/css')) // 输出 将会在dist/css下生成index.css
    });
    
    gulp.task('default',[ 'htmlminTask']); // 默认任务 , gulp 默认执行

可以通过 gulp lessTask 执行任务

如果在添加到默认任务中, 直接gulp执行

### 异步或同步执行 ###

在task中 是否使用return来决定是异步还是同步

const gulp = require('gulp');
    // 没有使用return
    gulp.task('js',function () {
        gulp.src('src/js/*.js')...
    })
    
    gulp.task('css',function () {
        gulp.src('src/js/*.js')...
    })
    
    gulp.task('html',function () {
        gulp.src('src/js/*.js')...
    })
    
    
    gulp.task('default', ['js', 'css', 'html']);

执行结果

![执行结果][3643]

上一个任务完成 才执行 下一个

然后加上return

const gulp = require('gulp');
    
    // 使用return
    gulp.task('js', function () { 
        return gulp.src('src/js/*.js')
    })
    gulp.task('css', function () { 
        return gulp.src('src/js/*.js')
    })
    gulp.task('html', function () { 
        return gulp.src('src/js/*.js')
    })
    
    gulp.task('default', ['js', 'css', 'html']);

执行结果

![执行结果][3651]

结果显然是异步的

不想全部同步 , 但是个别任务是要同步顺序执行 怎么办?

// less文件转化为css文件
    gulp.task('less', function () { 
        return gulp.src('src/less/*.less')
            .pipe($.less())
            .pipe(gulp.dest('src/css/'))
    });
    
    // 添加前置任务 这样less任务执行完 才会执行css任务
    // 执行css任务 都是自动先执行完less任务
    gulp.task('css', ['less'], function () { 
        return gulp.src('src/css/*.css')
            // .pipe($.concat('build.css')) // 合并成一个文件
            .pipe($.rename({suffix: ".min"}))
            .pipe($.cleanCss())
            .pipe(gulp.dest('dist/css/'))
    });

### gulp 自动刷新 ###

一个自动化构建工具  
怎么可以少了 watch 和自动刷新

自动刷新的插件是 gulp-livereload 本地服务器可以用 gulp-webserver 或者 gulp-connect 都可以

这里就演示用gulp-webserver和gulp-conncet

输入 gulp server 启动一下即可

这里就不演示了

[use-gulp]: https://github.com/Platform-CUF/use-gulp
[Link 1]: https://gulpjs.com/
[https_blog.csdn.net_qq_27626333_article_details_78006271]: https://blog.csdn.net/qq_27626333/article/details/78006271
[https_gulpjs.com_plugins]: https://gulpjs.com/plugins/
[3643]: /images/20220526/aaef397c35f345608ba7eae3a59f6c85.png
[3651]: /images/20220526/6be4401a5f2144989ef664f7c7fecf5a.png