gulp常用插件

1、gulp-uglify(JS压缩)

安装：npm install --save-dev gulp-uglify

gulpfile.js代码如下：

var gulp = require('gulp'),

var rename= require('gulp-rename')

var uglify= require("gulp-uglify");

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

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

.pipe(uglify())//压缩

.pipe(rename('index.min.js'))

.pipe(gulp.dest('build/js'));

});

gulp.task('default',['rename']);

2、gulp-minify-html（html压缩）

安装：npm install --save-dev gulp-minify-html

代码如下：

var gulp = require('gulp'),

var minifyHtml= require("gulp-minify-html");

gulp.task('minify-html',function() {

gulp.src('src/**/*.html')//要压缩的html文件

.pipe(minifyHtml())//压缩

.pipe(gulp.dest('build'));

});

gulp.task('default',['minify-html']);

3. gulp-concat (js文件合并)

安装：npm install --save-dev gulp-concat

代码如下：

var gulp = require('gulp'),

concat= require("gulp-concat");

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

gulp.src('src/**/*.js') //要合并的文件

.pipe(concat('index.js')) //合并匹配到的js文件并命名为 "index.js"

.pipe(gulp.dest('build/js'));

});

gulp.task('default',['concat']);

4、gulp-jada

安装：npm install –save-dev gulp-jada

Gulpfile.js代码如下：

var gulp= require('gulp');

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

gulp.task("jade",function(){

gulp.src("./jade/*.jade")

.pipe(jade({

pretty:true

}))

.pipe(gulp.dest("html/"))

})

gulp.task("default",["watch"],function(){

gulp.watch("jade/*.jade",["jade"]);

})

5、gulp-less

安装：npm install –save-dev gulp-less

Gulpfile.js代码如下：

var gulp = require('gulp'),

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

gulp.task('compile-less',function() {

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

.pipe(less())

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

});

gulp.task('default',['compile-less']);

6、gulp-sass

安装：npm install –save-dev gulp-sass

代码如下：

var gulp = require('gulp'),

var sass= require("gulp-sass");

gulp.task('compile-sass',function() {

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

.pipe(sass())

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

});

gulp.task('default',['compile-sass']);

7、gulp-imagemin（图片压缩）

安装：npm install –save-dev gulp-imagemin

代码如下：

var gulp = require('gulp');

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

gulp.task('uglify-imagemin',function() {

return gulp.src('src/images/*')

.pipe(imagemin())

.pipe(gulp.dest('build/images'));

});

gulp.task('default',['uglify-imagemin']);