By

安装

1
2
3
4
5
6
7
8
9
10
11

1. 全局安装 gulp
npm install gulp-cli -g

2. 作为项目的开发依赖（devDependencies）安装
npm install gulp --save-dev

3. 在项目根目录下创建一个名为 gulpfile.js 的文件
touch gulpfile.js

4. 运行
gulp

配置 gulpfile.js

  • 标准格式
1
2
3
4
5

var gulp = require('gulp');

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

default 是默认任务

运行

  • 输入
1

gulp
  • 输出
1
2
3

[13:26:37] Using gulpfile ~/Documents/test/gulp-test/gulpfile.js
[13:26:37] Starting 'default'...
[13:26:37] Finished 'default' after 67 μs

上面跑通了，但是啥都没干。。。

官文

https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

一个构建工具基础功能需要满足如下

  • webserver环境 gulp-live-server

  • 定位资源 gulp-html-replace

  • 内容嵌入

  • 支持模板编译 gulp-ejs

  • css模块编译(sass less)
  • js模块编译(amd cmd es6)
  • 资源压缩（图片、css、js）

  • md5文件版本控制 gulp-rev gulp-rev-collector

  • 清理文件 gulp-clear

  • 部署（zip、git、ftp、sftp、http） gulp-git gulp-ssh

见后续文章

插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var gulp = require('gulp'),  
browserify = require('browserify'),//这里用不上，管理js依赖的
source = require('vinyl-source-stream'),//同样这里用不上，和上面那个一起的
uglify = require('gulp-uglify'),//混淆js
clean = require('gulp-clean'),//清理文件
notify = require('gulp-notify'),//加控制台文字描述用的
buffer = require('vinyl-buffer'),
less = require('gulp-less'),//转换less用的
autoprefixer = require('gulp-autoprefixer'),//增加私有变量前缀
minifycss = require('gulp-minify-css'),//压缩
concat = require('gulp-concat'),//合并
fileinclude = require('gulp-file-include'),// include 文件用
template = require('gulp-template'),//替换变量以及动态html用
rename = require('gulp-rename'),//重命名
webserver = require('gulp-webserver'),//一个简单的server，用python的SimpleHttpServer会锁文件夹
imagemin = require('gulp-imagemin'),//图片压缩
gulpif  = require('gulp-if'),//if判断，用来区别生产环境还是开发环境的
rev  = require('gulp-rev'),//加MD5后缀
revReplace = require('gulp-rev-replace'),//替换引用的加了md5后缀的文件名，修改过，用来加cdn前缀
addsrc = require('gulp-add-src'),//pipeline中途添加文件夹，这里没有用到
del = require('del'),//也是个删除··· 
vinylPaths = require('vinyl-paths'),//操作pipe中文件路径的，加md5的时候用到了
runSequence = require('run-sequence');//控制task顺序