在Gulp中，使用的是Nodejs中的
stream
(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。
1、安装gulp
1.1 完成后运行全局gulp安装
npm install -g gulp
1.2 切换到项目中，进行局部安装一次，并运行
npm install gulp，如果想在安装时把gulp写进项目的package.json文件的依赖中，需要提前在项目里新建一个package.json文件(文件名称必须叫package.json和gulpfile.js，请叫我严肃脸)。
然后运行命令时，加上--sav-dev 就可以了
npm install --save-dev gulp
1.2.1 在项目中，gulp构建后自动添加版本号
但是由于公司发布系统限制，如果用右面方法实现，每次更新都会积压过多过期无用的文件，我们预期效果是:左边的文件格式，添加版本号；
-
分别安装gulp-rev、gulp-rev-collerctor
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
-
打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
-
打开node_modules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;
-
打开node_modules\gulp-rev-collector\index.js
31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
更新为: if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
1.3 关于gulp安装与环境变量配置,及安装不成功的原因
node与npm都安装正确，但gulp -v时确一直提示不是内部名外部命令....
最后查了N次发现是系统变量配置错误。
首先检查npm prefix
npm config get prefix
这个应该是系统变量中的path的配置；
D:\softwares\Node\node_global;
这个地址是要添加到系统变量中的。如下
高级系统设置
选中path配置，双击或点击编辑
在路径中添加node的根目录与刚才prefix的路径；
记得每个路径结束位置加上分号，再接下条链接
D:\softwares\Node\;D:\softwares\Node\node_global;
NODE_PATH
2、gulp使用方法
2.1 新建gulpfile.js(必须使用这个名字)
在项目中再创建一个gulpfile.js文件，里边可以定义一些方法。
假设gulpfile.js文件中有个default的任务，接下来运行：gulp+task名称
gulp default
会输出default的内容。
并以Finished结束
3、gulp常用插件
3.1 接下来安装及在gulpfile.js文件中配置一些常用的插件
插件的安装方式：
npm install --global xxx 全局安装
npm install xxx --save-dev 本地安装
优缺点如下：
| 安装方式 |
缺点 |
优点 |
| --global |
安装会造成很多冗余插件，浪费空间； |
只需要安装一次 |
| --save-dev |
每个项目都需要重新安装 |
减少空间，
直接写入package.json |
因为在使用 --global 参数的时候 --save 或 --save-dev参数是无效的。
这样就带来一个问题。此时 package.json 中的 dependencies, devDependencies 将无法享受到npm自动更新带来的便利，不使用dependencies, devDependencies 字段对我们的项目管理来说是不可接受的。
项目中调取的插件是从package.json中查看的，如果没有--save-dev，则不会在package.json中依赖注入dependencies。
这篇文章插件写的挺详细的。
自动加载插件
npm install --save-dev gulp-load-plugins
重命名
npm install --save-dev gulp-rename
var rename
=
require("gulp-rename");
// rename via string
gulp.src("src/hello.txt")
.pipe(rename("main/goodbye.md"))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md
js文件压缩
npm install --save-dev gulp-jsmin
var jsmin
=
require('gulp-jsmin');
var rename
=
require('gulp-rename');
gulp.task('default', function () {
gulp.src('src/**/*.js')
.pipe(jsmin())
.pipe(rename({suffix
:
'.min'}))
.pipe(gulp.dest('dist'));
});
npm install --save-dev gulp-uglify
npm install --save-dev pump
var gulp
=
require('gulp');
var uglify
=
require('gulp-uglify');
var pump
=
require('pump');
gulp.task('compress', function (cb) {
pump([
gulp.src('lib/*.js'),
uglify(),
gulp.dest('dist')
],
cb
);
});
css文件压缩
npm install --save-dev gulp-minify-css
npm install --save-dev gulp-cssmin
var gulp
=
require('gulp');
var cssmin
=
require('gulp-cssmin');
var rename
=
require('gulp-rename');
gulp.task('default', function () {
gulp.src('src/**/*.css')
.pipe(cssmin())
.pipe(rename({suffix
:
'.min'}))
.pipe(gulp.dest('dist'));
});
html文件压缩
npm install --save-dev gulp-html-minify
npm i gulp-htmlmin --save-dev
npm install gulp-processhtml --save-dev
var htmlminify = require("gulp-html-minify");
gulp.task('build-html' , function(){
return gulp.src("./html-init/**/*.html")
.pipe(htmlminify())
.pipe(gulp.dest("./html"))
});
js代码检查
npm install --save-dev gulp-jshint
npm install --save-dev jshint-stylish
var jshint
=
require('gulp-jshint');
gulp.task('lint', function() {
return
gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});
gulp.task('default', () =>
gulp.src(['file.js'])
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('jshint-stylish', {beep
:
true}))
);
混淆JS代码
npm install --save-dev gulp-obfuscate
var gulp
=
require('gulp');
var obfuscate
=
require('gulp-obfuscate');
gulp.task('default', function () {
return
gulp.src('test.js')
.pipe(obfuscate());
});
文件合并
npm install --save-dev gulp-concat
var concat
=
require('gulp-concat');
gulp.task('scripts', function() {
return
gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
less和sass的编译
npm install --save-dev gulp-less
npm install --save-dev gulp-sass
//压缩合并css, css中既有自己写的.less, 也有引入第三方库的.css
gulp.task('lessmin', function (done) {
gulp.src(['src/css/main.less', 'src/css/*.css'])
.pipe(less())
//这里可以加css sprite 让每一个css合并为一个雪碧图
//.pipe(spriter({}))
.pipe(concat('style.min.css'))
.pipe(gulp.dest('dist/css/'))
.on('end', done);
});
图片压缩
npm install --save-dev imagemin-pngquant
var imagemin
=
require('imagemin');
var imageminPngquant
=
require('imagemin-pngquant');
imagemin(['images/*.png'], 'build/images', {use
:
[imageminPngquant()]}).then(() => {
console.log('Images optimized');
});
npm install --save-dev gulp-imagemin
var imagemin
=
require('gulp-imagemin');
gulp.task('default', () =>
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);
运行顺序
npm install --save-dev run-sequence
按顺序执行
var runSequence
=
require('run-sequence');
gulp.task('build', function (done) {
runSequence(
['delRevCss'],
['revJs'],
['js'],
['css'],
['html'],
['imagemin'],
done);
});
逻辑代码
npm install --save-dev gulp-if
var gulpif
=
require('gulp-if');
var uglify
=
require('gulp-uglify');
var condition
=
true; // TODO: add business logic
gulp.task('task', function() {
gulp.src('./src/*.js')
.pipe(gulpif(condition, uglify()))
.pipe(gulp.dest('./dist/'));
});
给资源加时间戳
npm install --save-dev gulp-rev-collector
清除版本号缓存
npm install --save-dev gulp-rev
var rev
=
require('gulp-rev');
gulp.task('default', function () {
return
gulp.src('src/*.css')
.pipe(rev())
.pipe(gulp.dest('dist'));
});
删除当前目录中的build文件夹
npm install --save-dev del
var del
=
require('del');
del(['tmp/*.js', '!tmp/unicorn.js']).then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
4、gulp常用API
gulp.task() gulp.src() gulp.dest() gulp.watch()
具体可查看官方文档
//使用数组的方式来匹配多种文件
4.1 gulp.src();
用来获取流的,方法输入1个glob(比如匹配一个或多个文件的字符串，或者数组)
然后返回一个可以传递给插件的数据流。
gulp.src(globs[, options])gulp.src(['js/*.js','css/*.css','*.html'])
!js/app.js 从匹配结果中排队js/app.js
*.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件
* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
? 匹配文件路径中的一个字符(不会匹配路径分隔符)
[...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
! 匹配任何与括号中给定的任一模式都不匹配的
?匹配括号中给定的任一模式0次或1次，类似于js正则中的
+ 匹配括号中给定的任一模式至少1次，类似于js正则中的
*匹配括号中给定的任一模式0次或多次，类似于js正则中的
@匹配括号中给定的任一模式1次，类似于js正则中的
排除模式，在数组中的单个匹配模式前加上!即是排除模式
不能在数组中的第一个元素中使用排除模式
gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件gulp.src(['!b*.js',*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
4.2 gulp.dest();
gulp.dest(path[,options])
是用来写文件的
var gulp = require("gulp");
gulp.src("script/jquery.js")
.pipe(gulp.dest("dist/foo.js"));
//最终生成文件的路径为 dist/foo.js/jquery.js
解析：gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上
gulp.src()中通配符开始出现的那部分路径
gulp.src('app/src/**/*.css') //此时base的值为app/src,也就是说它的base路径为app/src//设该模式匹配到了文件 app/src/css/normal.css.pipe(gulp.dest('dist')) //用dist替换掉base路径，最终得到 dist/css/normal.css
gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script//假设匹配到的文件为script/lib/jquery.js.pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js
4.3 gulp.task();
是用来定义任务的
gulp.task(name[, deps], fn)；
deps是当前定义的任务需要依赖的其他任务，为一个数组。
当定义一个简单的任务时，需要传入任务名字和执行函数两个属性；
gulp.task('default',function(){
console.log("hi~");
});
也可以指定一个任务build执行css,js,imgs这三个任务，可以指定数组来完成。
gulp.task('build', ['css', 'js', 'imgs']);
这些任务不是按顺序执行的，可以将函数和数组结合起来指定依赖关系.
ex:定义一个css任务，在执行前检查greet任务是否已经执行完毕。
gulp.task('css', ['greet'],function(){ ...... });
此时，当执行css任务时，gulp会先执行greet任务，然后在它结束后再调用定义的css函数。
也可以定义在gulp开始运行的时候默认执行的任务
gulp.task('default',function(){ ...... });
gulp.task('one',function(){ //one是一个异步执行的任务 setTimeout(function(){ console.log('one is done') },5000);});//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行gulp.task('two',['one'],function(){ console.log('two is done');});
4.4 gulp.watch();
gulp.watch(glob[, opts], tasks)
用来监视文件的变化，当文件发生变化后，利用它来执行相应的任务。
延伸：
基于node的扩展
在sublime中安装SublimeLinter进行js & css代码校验
一、安装SublimeLinter：
1、按下 Ctrl+Shift+p 进入 命令模式（Command Palette）
2、输入pci
3、输入SublimeLinter，进行安装。
4、安装完成以后，出现如下界面：
二、安装SublimeLinter-jshint
1、按下 Ctrl+Shift+p 进入 命令模式（Command Palette）
2、输入pci
3、输入SublimeLinter-jshint，进行安装。
4、出现如下结果，则说明安装完成，输入 jshint -v可查看安装的jshint版本。
5、现在使用 Sublime Text 编辑 JavaScript 文件，就会有语法检查了！在行号的左侧会有黄色/红色的小圆点提示语法错误，将光标定位到错误的代码里，底部的状态栏会显示错误原因。
三、关于CSS代码检查：
csslint的安装方法与jshint一致，只需要在sublime text 3的package control中再安装SublimeLinter-csslint，然后在命令行中以下代码安装csslint即可。
输入 csslint --version可查看安装的csslint版本。
现在使用 Sublime 编辑CSS、JS文件都有自动拼写检查了。
