gulp自动化构建工具

目录

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

查看安装的版本

node --version

2.全局安装gulp

npm install --save-dev gulp

gulp API

详细请见官方文档

https://www.npmjs.com/package/gulp

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这个小项目

• 重命名插件：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

压缩结果都在dist文件夹：

 

 

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?

解决方法：

（1）利用async和await

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