整理gulp自動化構建工具(包含PostCss)

教程地址：http://segmentfault.com/a/1190000000372547     http://www.w2bc.com/Article/12941

一、安裝nodejs

二、新建package.json文件

三、全局和本地安裝gulp

四、使用npm安裝gulp插件(如：gulp-jshint、gulp-sass、gulp-mini-css、gulp-uglify等)

五、新建gulpfile.js文件

六、經過命令提示符運行gulp任務

附PostCss插件概覽：https://github.com/postcss/postcss#plugins

 

說明：

package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件。它是一個普通json文件，因此不能添加任何註釋。安裝gulp插件的時候若是提示npm warn package.json這樣的問題，請在package.json文件裏添加"private": true，即將應用程序標記爲私有。

gulpfile.js文件參考：

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

// 引入組件
var Autoprefixer = require('gulp-autoprefixer');//自動添加瀏覽器前綴
var htmlmin = require('gulp-htmlmin');//壓縮html,能夠壓縮頁面js、css
var imagemin = require('gulp-imagemin');//壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片）
var minifycss = require('gulp-minify-css');//壓縮css文件,並給引用url添加版本號避免緩存
var revappend = require('gulp-rev-append');//給頁面的引用添加版本號，清除頁面引用緩存
var spritesmith = require('gulp.spritesmith');//生成sprites圖片和樣式表
var less = require('gulp-less');//編譯Less
var csslint = require('gulp-csslint');//檢查css有無報錯或警告
var jshint = require('gulp-jshint');//檢查js有無報錯或警告
var concat = require('gulp-concat');//合併js文件
var uglify = require('gulp-uglify');//壓縮js文件
var babel = require('gulp-babel');//轉換代碼爲ES6最新語法形式

//引入PostCss
var postcss = require('gulp-postcss');
var bem = require('postcss-bem');
var cssNext = require('postcss-cssnext');
var px2rem = require('postcss-px2rem');//px轉換成rem
var autoprefixer = require('autoprefixer-core');
var postcssSimpleVars = require("postcss-simple-vars");
var postcssMixins = require("postcss-mixins");
var postcssNested = require("postcss-nested");
var sourcemaps = require("gulp-sourcemaps");


//nodeJS中管道式方法的api通常爲.pipe()方法，管道化執行組件任務，它很相似jQuery中的鏈式寫法

//定義一個Less任務（自定義任務名稱）
// 編譯Less
gulp.task('less', function() {
    gulp.src('./less/*.less') //該任務針對的文件，*表明全部文件
        .pipe(less()) //該任務調用的模塊
        .pipe(gulp.dest('./css')); //將會在css目錄下生成.css文件
});

//postcss處理css.
gulp.task("postcss", function(){
    var processors = [
        postcssMixins,
        postcssSimpleVars,
        postcssNested,
        cssNext,
        bem({style: 'bem'}),
        px2rem({
            remUnit: 75
        }),
        autoprefixer({
            browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
        })];

    return gulp.src(['./css/*.css'])
        .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("./stylesheets"));
});

//生成sprites圖片和樣式表
gulp.task('sprite', function () {
    var spriteData = gulp.src('./images/*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css'
    }));
    return spriteData.pipe(gulp.dest('./sprite'));
});

//根據設置瀏覽器版本自動處理瀏覽器前綴
gulp.task('testAutoFx', function () {
    gulp.src('./css/*.css')
        .pipe(Autoprefixer({
            browsers: ['last 2 versions'], //主流瀏覽器的最新兩個版本
            cascade: true, //是否美化屬性值 默認：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉沒必要要的前綴 默認：true
        }))
        .pipe(gulp.dest('./dist/css'));
});

//將px轉換成rem
gulp.task('px2rem', function() {
    var processors = [
        px2rem({
            remUnit: 75
        })
    ];
    return gulp.src('./css/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

//轉換代碼爲ES6最新語法形式
gulp.task('babel', function() {
    return gulp.src('./js/*.js')
        .pipe(babel())
        .pipe(gulp.dest('dist/es6'));
});

//壓縮HTML
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('*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./dist/html'));
});

//壓縮圖片
gulp.task('testImagemin', function () {
    gulp.src('./images/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
            multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化
        }))
        .pipe(gulp.dest('./dist/images'));
});

//壓縮css
gulp.task('testCssmin', function () {
    gulp.src('./css/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./dist/css'));
});
// 檢查css
gulp.task('csslint', function() {
    gulp.src('./css/*.css')
        .pipe(csslint())
        .pipe(csslint.reporter());
});

// 檢查js
gulp.task('jslint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 合併、壓縮js文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

//每一個gulpfile.js裏都應當有一個dafault任務，它是缺省任務入口
// 定義默認任務
gulp.task('default', function(){
    gulp.run('postcss', 'csslint', 'testImagemin', 'jslint', 'testCssmin', 'scripts');// 表示運行對應的任務

    // 監聽文件變化，如有改動則執行如下三個任務
    gulp.watch('./js/*.js', function(){
        gulp.run('postcss', 'csslint', 'jslint', 'testCssmin', 'scripts');
    });
});