});
4、图片相关插件
【imagemin】压缩图片文件
var gulp = require('gulp'),
imagemin = require('gulp-imagemin');
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
var gulp = require('gulp'),
imagemin = require('gulp-imagemin');
gulp.task('testImagemin', function () {
gulp.src('src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
【spritesmith】制作雪碧图
[注意]该插件与别的插件有所不同，它的使用方式是gulp.spritesmith，而不是gulp-spritesmith
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
gulp.task('img', function() {
return gulp.src('src/img/*')
.pipe(spritesmith({
'imgName':'sprite.png',
'cssName':'sprite.css',
'padding':5 //合并时两张图片的距离
}))
.pipe(gulp.dest('dist/img'));
});
5、文件相关插件
【rename】重命名
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('file', function() {
gulp.src('src/css/all.css')
.pipe(rename('a.css'))
.pipe(gulp.dest('dist/css'));
});
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('file', function() {
gulp.src('src/css/all.css')
.pipe(rename(function(path){
path.basename += "-min";
path.extname = ".scss"
}))
.pipe(gulp.dest('dist/css'));
});
【clean】删除文件
var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('clean', function () {
return gulp.src('dist/img/*')
.pipe(clean());
});
[注意]由于gulp中的任务是同步的，如果并列写，完全可能出现边编译边删除的情况
gulp.task('default', ['clean', 'less', 'images', 'js', 'watch']);//错误
所以需要配置一个异步，非常简单，加个回调
//正确
gulp.task('default', ['clean'], function(){
gulp.start('less', 'images', 'js', 'watch');
});
【zip】将文件变成zip压缩文件
[注意]如果gulp.src()的路径设置为'dist/*'，则压缩包只包含dist空文件夹，而不包含实际内容
var gulp = require('gulp');
var zip = require('gulp-zip');
gulp.task('file', function() {
gulp.src('dist/**/*')
.pipe(zip('project.zip'))
.pipe(gulp.dest('out'));
});
6、Hash相关插件
【useref】解析构建块在HTML文件来代替引用未经优化的脚本和样式表
//index.html
<!-- build:css /css/all.css -->
<link rel="stylesheet" href="src/css/style1.css">
<!-- endbuild -->
var gulp = require('gulp');
var useref = require('gulp-useref');
gulp.task('file', function() {
gulp.src('*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));
});
//dist/index.html
<link rel="stylesheet" href="/css/all.css">
【rev】给文件名添加hash值
//index.html -> index-256e7dc36b.html
var gulp = require('gulp');
var rev = require('gulp-rev');
gulp.task('file', function() {
gulp.src('*.html')
.pipe(rev())
.pipe(gulp.dest('dist'));
});
【rev-repalce】重写被gulp-rev重命名的文件名
//index.html
<!-- build:css /css/all.css -->
<link rel="stylesheet" href="src/css/style1.css">
<!-- endbuild -->
var gulp = require('gulp');
var rev = require('gulp-rev');
var useref = require('gulp-useref');
var revReplace = require('gulp-rev-replace');
gulp.task('file', function() {
gulp.src('*.html')
.pipe(useref())
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest('dist'));
});
//index-bc596e88c8.html
<link rel=