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']);