1. 参考
  2. 安装
  3. 常用插件
    1. gulp-sass
    2. gulp-babel
    3. gulp-file-include
    4. browser-sync
    5. gulp-font-spider
  4. API
    1. src 监听文件位置
      1. options.buffer
      2. options.read
      3. options.base
    2. dest 输出文件
    3. task 创建任务
    4. series 依序运行多个任务
    5. parallel 并行运行多个任务
    6. watch 监控文件

gulp 4.0

前端自动化工具

参考

gulp getting started
gulp api
gulp 入门指南

安装

1
2
3
4
5
6
// 安装gulp-cli
npm install --global gulp-cli
// 创建package.js.会提示输入项目信息,可直接按回车跳过.
npm init
// 安装gulp
npm install --save-dev gulp@next

注:
本文安装的gulp版本为4.0
目前(2018/1)
使用 npm install --save-dev gulp 命令安装的gulp版本为3.9
而 npm install --save-dev gulp@next (多了@next)命令安装的gulp版本为4.0
相较于gulp3,gulp4的语法有一些改动
如果想查看版本信息,可用gulp -v查询

1
2
3
>gulp -v
[14:37:58] CLI version 2.0.0
[14:37:58] Local version 4.0.0

测试是否安装成功
在项目根目录下新建gulpfile.js文件,填入以下内容

1
2
3
4
5
6
7
var gulp = require('gulp');

gulp.task('default', defaultTask);
function defaultTask(done) {
// place code for your default task here
done();
}

然后打开cmd,在项目根目录运行命令

1
gulp

如果出现下列提示,则安装成功

1
2
3
Using gulpfile ~/my-project/gulpfile.js
[11:15:51] Starting 'default'...
[11:15:51] Finished 'default' after 103 μs

常用插件

如需同时安装多个插件,用空格将多个插件名隔开即可,例如

1
npm install --save-dev gulp-sass gulp-babel babel-preset-env babel-cli babel-preset-env gulp-file-include

gulp-sass

将SCSS文件编译为CSS
npm gulp-sass

安装命令

1
npm install gulp-sass --save-dev

gulpfile.js文件设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use strict';
var gulp = require('gulp');

var sass = require('gulp-sass');
// 创建任务
// 'sass': 任务名
gulp.task('sass', function () {
// './sass/**/*.scss': 需编译的文件路径
return gulp.src('./sass/**/*.scss')
// 调用sass
// outputStyle: 设置输出CSS格式
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
// 输出文件
// './css': 编译后文件的储存路径
.pipe(gulp.dest('./css'));
});
// 实时监控文件.如发生变化,自动调用sass
gulp.task('sass:watch', function () {
// npm 3.0 写法
// gulp.watch('./sass/**/*.scss', ['sass']);
// npm 4.0 写法
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});

运行方式

1
2
3
4
// 项目根目录下输入
gulp sass
// or 实时编译
gulp sass:watch

gulp-babel

将ES6代码转换为ES5
安装命令

1
npm install --save-dev gulp-babel babel-preset-env

gulpfile.js设置

1
2
3
4
5
6
7
8
9
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('babel', () =>
gulp.src('src/app.js')
.pipe(babel({
presets: ['env']
}))
.pipe(gulp.dest('dist'))
);

运行方式

1
gulp babel

gulp-file-include

HTML复用/拆分.在html文档中,载入其他html文档,类似css的import
安装命令

1
npm install gulp-file-include

gulpfile.js设置

1
2
3
4
5
6
7
8
9
10
gulp = require('gulp');
var fileinclude = require('gulp-file-include'),
gulp.task('fileinclude', function() {
gulp.src(['app/html/index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('app'));
});

使用方法 假设有文件header.html,其内容为

1
<div></div>

如需在其它html中载入header.html,使用@@include关键字即可

1
2
3
<body>
@@include("header.html")
</body>

编译结果

1
2
3
<body>
<div></div>
</body>

gulpfile.js设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var gulp = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});

// or...
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "yourlocal.dev"
});
});

browser-sync

多浏览器同时自动刷新,无需安装编辑器/浏览器插件
安装browser-sync

1
npm install browser-sync --save-dev

gulpfile.js设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function(){
browserSync.init({
server: {
baseDir: './' //监听文件目录
}
});
});
gulp.task('browserSync:watch', function(done){
gulp.watch('test/**/*', function(done){
browserSync.reload();
// 参考 https://github.com/BrowserSync/browser-sync/issues/1065
done();
});
});

gulp.task('run', gulp.parallel('browserSync','browserSync:watch'));

gulp-font-spider

字蛛的gulp插件,通过扫描CSS @fontface和HTML文档内容,缩小字体文件体积
windows下的字蛛通过node-gyp编译,需要windows-build-tools运行环境
如果出现node-gyp编译失败的提示.先用uninstall命令删除gulp-font-spider,安装windows-build-tools.再重新安装gulp-font-spider

安装命令

1
npm install gulp-font-spider --save-dev

使用方式

gulp-font-spider会自动搜索使用@fontface载入的字体,自动简化ttf文件大小

1
2
3
4
5
6
7
8
9
@font-face {
font-family: "openSans";
src: url("../font/OpenSans-Regular.ttf");
font-weight: normal;
font-style: normal;
}
body {
font-family: "openSans";
}

API

src 监听文件位置

gulp.src(globs[, options])

  • globs 文件路径
1
2
3
4
// 单个文件
gulp.src('app/index.html');
// 多个文件
gulp.src(['app/index.html', 'app/header.html']);

常用的options

options.buffer

是否返回buffer,默认为true
为false时返回stream, 这在处理大文件时很有用
注: 部分插件可能不支持stream

options.read

默认值为true.为false不读取文件,返回null

options.base

设置输出文件的路径结构

1
2
3
4
5
6
7
8
9
// gulp.dest('build')的作用是输出文件到build文件夹下
// 输出文件路径为build/index.html
gulp.src('app/html/index.html').pipe(gulp.dest('build'));
// 输出路径build/app/html/index.html,即保存了文件的相对路径
gulp.src('app/html/index.html', {base: '.'}).pipe(gulp.dest('build'));
// 输出路径build/html/index.html, 新生成的路径里没有app
gulp.src('app/html/index.html', {base: 'app'}).pipe(gulp.dest('build'));
// 输出路径build/index.html, 没有app/html
gulp.src('app/html/index.html', {base: 'app/html'}).pipe(gulp.dest('build'));

dest 输出文件

输出文件,可通过pipe多次调用
gulp.dest(path[, options])

1
2
3
4
// 将app/index.html输出到build和test文件夹下
gulp.src('app/index.html')
.pipe(gulp.dest('build'))
.pipe(gulp.dest('test'));

task 创建任务

gulp.task([name,] fn)

  • name 任务名
  • fn 被执行的函数,或gulp.series gulp.parallel gulp.lastRun
1
2
3
4
5
// 创建任务copy,作用是复制html文件到build文件夹下
gulp.task('copy', function(){
return gulp.src('app/*.html')
.pipe(gulp.dest('build'));
});

调用copy任务

1
2
3
4
5
6
7
8
9
10
// 在pipe中调用
gulp(function(){
gulp.src('app/*.css')
.pipe(copy())
})
// 使用gulp.series调用
gulp.task('build', gulp.series('sass', 'babel', 'copy'))

// 如果想在cmd调用任务,执行命令为: gulp 任务名
gulp copy

series 依序运行多个任务

gulp.series(...tasks)
依序调用一系列任务/函数.当发生错误时,后边的任务不会被执行

1
2
3
4
5
6
7
gulp.task('one',function(done){
done();
})
function two(done){
done();
}
gulp.task('default', gulp.series('one', 'two'));

parallel 并行运行多个任务

gulp.parallel(...tasks)
类似series,区别是parallel并行调用任务.即使有一个任务出错,后边的函数都会被执行
如果一堆任务中有watch,建议使用parallel
因为用series的话,watch会一直运行下去,导致后面的任务无法被执行

watch 监控文件

gulp.watch(globs[, opts][, fn])
监控文件,当发生变化时,调用fn

1
gulp.watch('app/**/*', gulp.parallel('copy'));