gulp 4.0

前端自动化工具

参考

安装

// 安装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文件,填入以下内容

var gulp = require('gulp');

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

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

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文件设置

'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'));
});

运行方式

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

gulp-babel

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

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

gulpfile.js设置

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设置

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设置

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设置

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文件大小

@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 文件路径

// 单个文件
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

设置输出文件的路径结构

// 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])

// 将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

// 创建任务copy,作用是复制html文件到build文件夹下
gulp.task('copy', function(){
    return gulp.src('app/*.html')
        .pipe(gulp.dest('build')); 
});

调用copy任务

// 在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)
依序调用一系列任务/函数.当发生错误时,后边的任务不会被执行

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'));