自动化构建工具gulp详解

http://javascript.ruanyifeng.com/tool/gulp.html#toc1   //gulp用法介绍
http://www.cnblogs.com/2050/p/4198792.html    //gulp插件介绍
http://ju.outofmemory.cn/entry/103253      //gulp常用插件介绍
http://www.dbpoo.com/getting-started-with-gulp/  //Gulp安装及配合组件构建前端开发一体化

gulp文件一定要命名为gulpfile.js，并且在项目的根目录

gulp常用插件介绍

gulp-uglify:进行js文件压缩

gulp-uncss-task :A Gulp task for removing unused CSS

var gulp = require('gulp');
var uncss = require('gulp-uncss-task');
 
gulp.task('default', function() {
    gulp.src('bootstrap.css')
        .pipe(uncss({
            html: ['index.html', 'contact.html', 'about.html']
        }))
        .pipe(gulp.dest('dest'));
});

 

gulp-rename:文件重命名

gulp-clean : 清空文件夹,函数需要进行return

var gulp = require('gulp');
var clean = require('gulp-clean');
 
gulp.task('clean-scripts', function () {
  return gulp.src('app/tmp/*.js', {read: false})
    .pipe(clean());
});
 
gulp.task('scripts', ['clean-scripts'], function () {
  gulp.src('app/scripts/*.js')
    .pipe(gulp.dest('app/tmp'));
});
 
gulp.task('default', ['scripts']);

 

 

gulp-ngmin:Pre-minify AngularJS apps with ngmin

gulp.task('mini-pjs', function() {
  gulp.src(paths.protal_script)
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('tem-protal.js'))
    .pipe(ngmin())
    .pipe(gulp.dest('build/js'))
    .pipe(uglify({mangle: false}))
    .pipe(rename('tem-protal.min.js'))
    .pipe(gulp.dest('build/js'));
  
});

 

gulp-jshint:用来检查js代码

var gulp = require('gulp'),
    jshint = require("gulp-jshint");
 
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});

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

文件合并

使用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'));
});

图片压缩

可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。
安装：npm install --save-dev gulp-imagemin

//图片压缩
//commons
gulp.task("portal_image",function(){
    return gulp.src(paths.portal_image)
    .pipe(imagemin({
//        optimizationLevel:5,//png使用
//        interlaced:false,
//        progressive: true,//jpg使用
//        svgoPlugins: [{removeViewBox: false}],//svg使用
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('build/images'));
});

gulp-imagemin的使用比较复杂一点，而且它本身也有很多插件，建议去它的项目主页看看文档

 

gulp.task('minify', function () {
    gulp.src('app/app.js')
        .pipe(uglify())
        .pipe(rename('app.min.js'))
        .pipe(gulp.dest('./build'))
});
;

/**
 * Created by li on 2015/12/30.
 */
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    minifyCss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    clean = require('gulp-clean');

//清空build文件夹
gulp.task('clean', function () {
    return gulp.src('build', {read: false})
        .pipe(clean());

})

//压缩js
gulp.task('minifyjs', function () {
    gulp.src('app/app.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./build'))
});

//压缩css
gulp.task('minifycss', function () {
    gulp.src('app/app.css')
        .pipe(minifyCss())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./build'));
})

//先执行clean，然后进行css和js文件压缩
gulp.task('minify', ['clean'], function () {
    gulp.start('minifycss', 'minifyjs');
});

当需要多个任务同步执行时

//任务afterHello会在hello任务完成后执行
gulp.task('hello', function () {
    console.log('hello');

});
gulp.task('afterHello', ['hello'], function () {
    console.log('after hello');

});