gulp自动化构建工具

末蓝、 2022-01-21 06:41 405阅读 0赞

**目录**

gulp是什么？

gulp安装

gulp API

gulp.src(globs\[, options\])

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

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

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

gulp API 实战

常用gulp插件

watch API的使用

可能报的错误：

--------------------

# gulp是什么？ #

1.自动化——gulp是一个工具包，可以帮助您自动化开发工作流中痛苦或耗时的任务。

2.与平台无关——所有主要ide都内置了集成，人们使用gulp和PHP、. net、Node。js、Java和其他平台。

3.强大的生态系统——使用npm模块做任何你想做的事情+超过2000个精心设计的插件流文件转换

4.简单——通过提供一个最小的API接口，gulp易于学习和使用。

# gulp安装 #

1. 安装node

[https://www.runoob.com/nodejs/nodejs-install-setup.html][https_www.runoob.com_nodejs_nodejs-install-setup.html]

查看安装的版本

node --version

2.全局安装gulp

npm install --save-dev gulp

# gulp API #

详细请见官方文档

[https://www.npmjs.com/package/gulp][https_www.npmjs.com_package_gulp]

[https://www.gulpjs.com.cn/docs/api/][https_www.gulpjs.com.cn_docs_api]

*  ### gulp.src(globs\[, options\]) ###

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 [Vinyl files][] 的 [stream][] 它可以被 [piped][] 到别的插件中

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

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它

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

定义一个使用 [Orchestrator][] 实现的任务（task）。

gulp.task('somename', function() {
      // 做一些事
    });

name

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

deps

类型： `Array`

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

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

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

# gulp API 实战 #

### 常用gulp插件 ###

利用gulp插件，压缩gulptestdemo这个小项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70][]

*  重命名插件：rename

npm install --save-dev gulp-rename

*  合并文件插件concat

npm install --save-dev gulp-concat

*  压缩js插件：uglify

npm install --save-dev gulp-uglify

var gulp = require('gulp'),
      uglify = require('gulp-uglify'),
      rename = require('gulp-rename'), //rename
      concat = require('gulp-concat'); //file concat
    
    gulp.task('minifyjs',function(){
      return gulp.src('scripts/*.js')
      .pipe(concat('main.js'))     //合并所有js到main.js
      .pipe(gulp.dest('dist/scripts'))  //输出main.js 到文件夹
      .pipe(rename({suffix:'.min'}))  //rename压缩后的文件名
      .pipe(uglify())              //压缩
      .pipe(gulp.dest('dist/scripts')); //输出
    });

css插件 ：minify-css

npm install --save-dev gulp-minify-css

var gulp = require('gulp'),
      minifycss = require('gulp-minify-css');
    
    gulp.task('minifycss', function() {
      return gulp.src('styles/*.css') //压缩文件
        .pipe(minifycss()) //执行压缩
        .pipe(gulp.dest('dist/styles')) //输出文件夹
    });

*  压缩html插件：minify-html

npm install --save-dev gulp-minify-html

var gulp = require('gulp'),
       minifyhtml = require('gulp-minify-html');
    
    gulp.task('minifyhtml',function(){
      return gulp.src('*.html')
      .pipe(minifyhtml())              //压缩
      .pipe(gulp.dest('dist')); //输出
    });

*  压缩图片插件：imagemin （需要先安装imagemin-pngquant插件）

npm install --save-dev gulp-imagemin-pngquant
    npm install --save-dev gulp-imagemin

var gulp = require('gulp'),
         imagemin = require('gulp-imagemin');
    
    gulp.task('minifyimage',done => {
        gulp.src('images/*.*')
            .pipe(imagemin({progressive: true}))
            .pipe(gulp.dest('dist/images'));
        done();
    });

合并所有任务

gulp 3.0

gulp.task('default',['minifyimage','minifyjs','minifycss','minifyhtml']);

gulp 4.0：新增加了series（顺序执行）和parellel（并行执行）任务执行方法

gulp.task('default',gulp.series('minifyimage','minifyjs','minifycss','minifyhtml'));

执行：

gulp

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 1][]

压缩结果都在dist文件夹：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 2][]

### watch API的使用 ###

gulp 4.0 watch API 的第二个参数不能是任务数组了，而是直接传入回调函数或者gulp.series('任务名')

//监视css文件，当有更新执行重新压缩css的回调函数
    gulp.task('watchcss',() => {
      gulp.watch(['styles/*.css'],() => {
        gulp.src('styles/*.css') //压缩文件
        .pipe(minifycss()) //执行压缩
        .pipe(gulp.dest('dist/styles')) //输出文件夹
      });
    });

### 可能报的错误 ###

1.**The following tasks did not complete: mytask   Did you forget to signal async completion?**

![2019060820033972.png][]

解决方法：

（1）利用async和await

![20190608200502648.png][]

（2）gulp.task 的回调函数，传入done方法，将此方法添加在回调函数最后。告知gulp这个stream结束

![20190608200715237.png][]

[https_www.runoob.com_nodejs_nodejs-install-setup.html]: https://www.runoob.com/nodejs/nodejs-install-setup.html
[https_www.npmjs.com_package_gulp]: https://www.npmjs.com/package/gulp
[https_www.gulpjs.com.cn_docs_api]: https://www.gulpjs.com.cn/docs/api/
[Vinyl files]: https://github.com/wearefractal/vinyl-fs
[stream]: http://nodejs.org/api/stream.html
[piped]: http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options
[Orchestrator]: https://github.com/robrich/orchestrator
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70]: /images/20220121/80c67fb1dbdf448fb9592abaaf660e74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 1]: /images/20220121/38ff4593004e4d0d8868e5ad6df20f01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 2]: /images/20220121/882ef6739fdd44e28d160893d490399d.png
[2019060820033972.png]: /images/20220121/1813f6ef982b4180b029929b53e32039.png
[20190608200502648.png]: /images/20220121/196af8b539334f7a8f5248ecfea5a21c.png
[20190608200715237.png]: /images/20220121/00b1488506c347499133beab989102bd.png