var gulp = require('gulp'), uglify = require("gulp-uglify"); gulp.task('minify-js', function () { gulp.src('js/*.js') // 要压缩的js文件 .pipe(uglify()) //使用uglify进行压缩,更多配置请参考： .pipe(gulp.dest('dist/js')); //压缩后的路径 });
4.4 css文件压缩
使用gulp-minify-css
安装：
npm install --save-dev gulp-minify-css
要压缩css文件时可以使用该插件
var gulp = require('gulp'), minifyCss = require("gulp-minify-css"); gulp.task('minify-css', function () { gulp.src('css/*.css') // 要压缩的css文件 .pipe(minifyCss()) //压缩css .pipe(gulp.dest('dist/css')); });
4.5 html文件压缩
使用gulp-minify-html
安装：
npm install --save-dev gulp-minify-html
用来压缩html文件
var gulp = require('gulp'), minifyHtml = require("gulp-minify-html"); gulp.task('minify-html', function () { gulp.src('html/*.html') // 要压缩的html文件 .pipe(minifyHtml()) //压缩 .pipe(gulp.dest('dist/html')); });
4.6 js代码检查
使用gulp-jshint
安装：npm install --save-dev gulp-jshint
用来检查js代码
var gulp = require('gulp'), jshint = require("gulp-jshint"); gulp.task('jsLint', function () { gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter()); // 输出检查结果 });
4.7 文件合并
使用gulp-concat
安装：
npm install --save-dev gulp-concat
用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了
var gulp = require('gulp'), concat = require("gulp-concat"); gulp.task('concat', function () { gulp.src('js/*.js') //要合并的文件 .pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js" .pipe(gulp.dest('dist/js')); });
4.8 less和sass的编译
less使用gulp-less,
安装：
npm install --save-dev gulp-less
var gulp = require('gulp'), less = require("gulp-less"); gulp.task('compile-less', function () { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css')); });
sass使用gulp-sass
安装：
npm install --save-dev gulp-sass
var gulp = require('gulp'), sass = require("gulp-sass"); gulp.task('compile-sass', function () { gulp.src('sass/*.sass') .pipe(sass()) .pipe(gulp.dest('dist/css')); });
4.9 图片压缩
可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。
安装：
npm install --save-dev gulp-imagemin
var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); //png图片压缩插件 gulp.task('default', function () { return gulp.src('src/images/*') .pipe(imagemin({ progressive: true, use: [pngquant()] //使用pngquant来压缩png图片 })) .pipe(gulp.dest('dist')); });
gulp-imagemin的使用比较复杂一点，而且它本身也有很多插件，建议去它的项目主页看看文档
4.10 自动刷新
使用gulp-livereload插件
安装:
npm install --save-dev gulp-livereload
当代码变化时，它可以帮我们自动刷新页面
该插件最好配合谷歌浏览器来使用，且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。
var gulp = require('gulp'), less = require('gulp-less'), livereload = require('gulp-livereload'); gulp.task('less', function() { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); }); gulp.task('watch', function() { livereload.listen(); //要在这里调用listen()方法 gulp.watch('less/*.less', ['less']); });