前言
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());
});
网友评论