前言
1、本文用cnpm代替npm，因为实在受不了npm拉包的速度。
2、本文直接以实践操作讲解gulp的流行插件，但直接略过所有插件的安装过程，安装命令就是cnpm install gulp-pluginname。
CSS相关
gulp-sass插件：编译SCSS文件
官网：https://www.npmjs.com/package/gulp-sass
准备简单的testscss1.scss文件和testscss2.scss文件放在根目录，准备gulpfile.js：
var gulp = require('gulp'),
sass = require('gulp-sass'); // 定义gulp对象和sass对象
gulp.task('test', function () { // 定义一个任务test
gulp.src(['testscss1.scss', 'testscss2.scss']) // 引入两个资源文件
.pipe(sass()) // 执行编译
.pipe(gulp.dest('testcss')); // 输出到testcss文件夹，如果没有就自动创建
});
gulp.task('default',['test']); // 定义默认任务，任务内容就是执行test任务
gulp-clean-css：压缩css文件（别用gulp-minify-css，已废弃）
官网：https://www.npmjs.com/package/gulp-clean-css
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
cleanCss = require('gulp-clean-css');
gulp.task('test', function () {
gulp.src(['testscss1.scss','testscss2.scss'])
.pipe(sass())
.pipe(concat('all.css'))
.pipe(cleanCss()) // 又多了一步，压缩
.pipe(gulp.dest('testcss'));
});
gulp.task('default',['test']);
gulp-autoprefixer：自动根据参数加厂商前缀
官网：https://www.npmjs.com/package/gulp-autoprefixer
这个插件就不像上面的几个插件那么简单了，你需要先弄懂gulp-autoprefixer插件的参数，所有参数的解释可以看这里https://github.com/postcss/autoprefixer#options，其中browsers参数的值的写法可以参考这里https://github.com/ai/browserslist#queries。
插件的主要原理是根据你设定的browsers参数，去Can I Use网站检索，比如browsers参数设了last 3 iOS versions，插件去Can I Use一查，iOS最新的三个版本是 8.4, 9.2, 9.3 这三个版本，然后插件就会去看你的css文件里面的属性名，如果8.4版本要求某个属性名必须带-webkit-前缀，那么插件就会帮你写一个带前缀的声明。参数非常的智能，不用你写具体的版本号，插件自动帮你去查版本号。再比如，last 2 versions就是主流浏览器的最新两个版本。从实践来看，你首先要注意IE必须支持到什么版本，然后其他的内核就支持最近3个版本就差不多了。browsers参数设为数组的话，取多个元素的范围的并集。也就是说，你又想最近三个版本，又想IE支持到IE6，那么就都写上，插件会取并集。
参数中出现各厂商的名称如下：
Android for Android WebView.
**Chrome **for Google Chrome.
Firefox or ff for Mozilla Firefox.
Explorer or ie for Internet Explorer.
iOS or ios_saf for iOS Safari.
Opera for Opera.
Safari for desktop Safari.
OperaMobile or op_mob for Opera Mobile.
OperaMini or op_mini for Opera Mini.
ChromeAndroid or and_chr
FirefoxAndroid or and_ff for Firefox for Android.
ExplorerMobile or ie_mob for Internet Explorer Mobile.
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
autoprefixer = require('gulp-autoprefixer'),
cleanCss = require('gulp-clean-css');
gulp.task('test', function () {
gulp.src(['testscss1.scss','testscss2.scss'])
.pipe(sass())
.pipe(concat('all.css')) //先合并成css再统一加前缀
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: false, //是否美化属性值，也就是冒号对齐， 默认：true 像这样：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
//现在我们既然是要压缩，所以没必要对齐，所以我写了false
}))
.pipe(cleanCss())
.pipe(gulp.dest('testcss'));
});
gulp.task('default',['test']);
gulp-tmtsprite和gulp-spritesmith：精灵图
gulp-tmtsprite官网：https://www.npmjs.com/package/gulp-tmtsprite
gulp-spritesmith官网：https://www.npmjs.com/package/gulp-spritesmith
sprity官网：https://www.npmjs.com/package/sprity
其他：https://www.npmjs.com/search?q=gulp+sprite
JS相关
gulp-uglify：压缩JS文件
官网：https://www.npmjs.com/package/gulp-uglify
准备jQuery的最新未压缩版本，放到当前目录。再准备一个min版本做对比。
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('test', function () {
gulp.src('jquery-3.1.1.js')
.pipe(uglify())
.pipe(gulp.dest('testjs'));
});
gulp.task('default',['test']);
简单对比一下uglify处理后的文件跟官方jquery-3.1.1.min.js，KB数相差1KB，可以接受。
gulp-sourcemaps：生成sourcemaps
官网：https://www.npmjs.com/package/gulp-sourcemaps
下面代码，会在testjs中新建maps文件夹，存放sourcemaps。
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
gulp.task('test', function () {
gulp.src('jquery-3.1.1.js')
.pipe(sourcemaps.init()) // 创建sourcemaps
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('maps')) // sourcemaps输出路径（存放位置）
.pipe(gulp.dest('testjs'));
});
gulp.task('default',['test']);
图片相关
gulp-imagemin：压缩各种格式图片
官网：https://www.npmjs.com/package/gulp-imagemin
var gulp = require('gulp'),
imagemin = require('gulp-imagemin');
gulp.task('task_imagemin', function () {
gulp.src(['图1.jpg','图1.gif'])
.pipe(imagemin())
.pipe(gulp.dest('testimage'));
});
HTML相关
gulp-htmlmin：压缩html
官网：https://www.npmjs.com/package/gulp-htmlmin
选项说明文档：https://github.com/kangax/html-minifier#options-quick-reference
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
gulp.task('minify', function() {
gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});
通用
gulp-replace：替换文件内字符
官网：https://www.npmjs.com/package/gulp-replace
它负责替换文件内的字符，比如批量替换html文件内的css文件、js文件路径，又比如给路径后面批量加时间戳，等等。用法跟JS的字符串replace方法一致。
var replace = require('gulp-replace');
gulp.task('templates', function(){
gulp.src(['file.txt'])
.pipe(replace(/foo(.{3})/g, '$1foo'))
.pipe(gulp.dest('build/file.txt'));
});
gulp-rename：重命名文件
官网：https://www.npmjs.com/package/gulp-rename
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
gulp.task('test', function () {
gulp.src('jquery-3.1.1.js')
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('testjs'));
});
gulp.task('default',['test']);
gulp-concat插件：合并文件
官网：https://www.npmjs.com/package/gulp-concat
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'); // 多定义了一个concat对象
gulp.task('test', function () {
gulp.src(['testscss1.scss','testscss2.scss'])
.pipe(sass())
.pipe(concat('all.css')) // 编译之后多了这步合并操作，合并到all.css里
.pipe(gulp.dest('testcss'));
});
gulp.task('default',['test']);
gulp-changed：只操作有修改的文件
官网：https://www.npmjs.com/package/gulp-changed
这其实是一个效率插件，比如我们有20个文件，当你修改其中1个文件时，由于任务的局限性，也会把其余19匹配的无辜的同类给一并进行处理，这样就大大降低了效率。而 gulp-changed 插件会首先把文件进行比对，如果文件没有改动，则跳过后续任务。
我们来测试一下：
准备两个scss文件；
编译一次，记录生成文件的“修改时间”；
然后再编译一次，记录生成文件的“修改时间”；
对比两次的修改时间，是否有变化，如果一切正常的话，应该无变化；
然后修改其中一个scss文件，再编译一次，记录它生成文件的修改时间；
对比修改时间，正常的话应该是有变化。
var gulp = require('gulp'),
sass = require('gulp-sass'),
changed = require('gulp-changed');
gulp.task('test', function () {
gulp.src(['testscss1.scss', 'testscss2.scss'])
.pipe(changed('testcss', {extension: '.css'}))
.pipe(sass())
.pipe(gulp.dest('testcss'));
});
gulp.task('default',['test']); // 定义默认任务，任务内容就是执行test任务
经测试，第一次是10:28:34，第二次是10:28:34，第三次是10:29:39，另一个文件依然是10:28:34。
最后看一下changed('testcss', {extension: '.css'})的参数，第一个参数与输出路径保持一致，第二个参数是扩展名，这个参数很关键，如果没有设扩展名，程序会去testcss目录寻找testscss1.scss文件，当然是找不到的，所以每次都会重新编译。设了扩展名，程序会去找testscss1.css，这样就没问题了。
gulp-clean：删除文件或文件夹
官网：https://www.npmjs.com/package/gulp-clean
当你需要清空缓存文件夹时，或由于某个目的需要清除一些文件时，可以用gulp-clean。
var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('default', function () {
gulp.src('app/tmp', {read: false})
.pipe(clean());
});
网友评论