gulp.js 核心代码

//监听事件（自动编译less）

//安装：命令提示符执行 cnpm install gulp-less --save-dev

// 启动监听事件：命令提示符执行 gulp testWatch

var gulp = require('gulp');

var less = require('gulp-less');

gulp.task('testLess', function () {

gulp.src(['src/less/*.less','!src/less/{reset,test}.less'])

.pipe(less())

.pipe(gulp.dest('src/css'));

});

gulp.task('testWatch', function () {

gulp.watch('src/**/*.less', ['testLess']); //当所有less文件发生改变时，调用testLess任务

});

/*使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，

删除多余属性等操作*/

/*安装：命令提示符执行 cnpm install gulp-htmlmin --save-dev */

//命令提示符执行：gulp testHtmlmin

var gulp = require('gulp');

var htmlmin = require('gulp-htmlmin');

gulp.task('testHtmlmin', function () {

var options = {

removeComments: true,//清除HTML注释

collapseWhitespace: true,//压缩HTML

collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />

removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />

removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

minifyJS: true,//压缩页面JS

minifyCSS: true//压缩页面CSS

};

gulp.src('src/html/*.html').pipe(htmlmin(options)).pipe(gulp.dest('dist/html')); //压缩后的存储位置

});

/*使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）

很多人安装gulp-imagemin都会出现错误，我也查了很多资料，也不知道所以然，我的做法是出错再重新安装，如果你知道问题所在，请一定告诉我！

*/

/*安装：命令提示符执行 cnpm install gulp-imagemin --save-dev */

//命令提示符执行：gulp testImagemin

var gulp = require('gulp');

var imagemin = require('gulp-imagemin');

gulp.task('testImagemin', function () {

gulp.src('src/img/*.{png,jpg,gif,ico}')

.pipe(imagemin({

optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）

progressive: false, //类型：Boolean 默认：false 无损压缩jpg图片

interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染

multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化

}))

.pipe(gulp.dest('dist/img'));

});

/*

使用gulp-clean-css

压缩css文件，

减小文件大小，

并给引用url添加版本号避免缓存。

请使用gulp-clean-css，用法一致。

*/

//安装：命令提示符执行 cnpm install gulp-clean-css --save-dev

//命令提示符执行：gulp testCssmin

// var gulp = require('gulp');

// var cssmin = require('gulp-clean-css');

// gulp.task('testCssmin', function () {

// gulp.src('src/css/*.css')

// .pipe(cssmin({

// advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]

// compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]

// keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]

// keepSpecialComments: '*'

// //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀

// }))

// .pipe(gulp.dest('dist/css'));

// });

var gulp = require('gulp');

var cssmin = require('gulp-clean-css');

//确保已本地安装gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]

var cssver = require('gulp-make-css-url-version');

gulp.task('testCssmin', function () {

gulp.src('src/css/*.css')

.pipe(cssver()) //给css文件里引用文件加版本号（文件MD5）

.pipe(cssmin())

.pipe(gulp.dest('src/css'));

});

/*使用gulp-rev-append给页面的引用添加版本号，清除页面引用缓存*/

//基本使用（给页面引用url添加版本号，以清除页面缓存）

//安装：命令提示符执行 cnpm install gulp-rev-append --save-dev

// <script src="js/js-one.js?rev=@@hash"></script>

//命令提示符执行：gulp testRev

var gulp = require('gulp');

var rev = require('gulp-rev-append');

gulp.task('testRev', function () {

gulp.src('src/html/*.html')

.pipe(rev())

.pipe(gulp.dest('src/html'));

});

/*

使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。

使用她我们可以很潇洒地写代码，

不必考虑各浏览器兼容前缀。

【特别是开发移动端页面时，就能充分体现它的优势。

例如兼容性不太好的flex布局。】

安装：命令提示符执行 cnpm install gulp-autoprefixer --save-dev

命令提示符执行：gulp testAutoFx

*/

var autoprefixer = require('gulp-autoprefixer');

gulp.task('testAutoFx', function () {

gulp.src('src/css/*.css').pipe(autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0'], cascade: true, //是否美化属性值 默认：true 像这样：

//-webkit-transform: rotate(45deg);

// transform: rotate(45deg);

remove:true //是否去掉不必要的前缀 默认：true

}))

.pipe(gulp.dest('src/css'));

/*多个方法合并到一个命令里面来*/

gulp.src('src/html/*.html')

.pipe(rev())

.pipe(gulp.dest('src/html'));

});

/*

gulp-livereload拯救F5！当监听文件发生变化时，浏览器自动刷新页面。

【事实上也不全是完全刷新，例如修改css的时候，

不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】

特别是引用外部资源时，刷新整个页面真是费时费力。

安装：命令提示符执行 cnpm install gulp-livereload --save-dev

*/

/*教程一点：http://www.ydcss.com/archives/18*/