gulp壓縮靜態資源

[需求分析]

• 我有JS/Css/html等的壓縮需求，gulp能知足
• gulp是構建自動化的工具，對業務的處理,依託第三方插件來完成
• 官方導讀 http://www.gulpjs.com.cn/docs...

[前提]

• node.js運行環境安裝時並配置了npm
• npm是node.js的包管理工具，npm install 就能下載相應模塊
• 相似於php的laravel框架的composer require,也是下載依賴的好手

[步驟]

1. gulp下載
2. gulpfile.js配置
3. gulp <task> <othertask>調用執行

[實踐]

var gulp =  require('gulp'),            //require的是node_modules中已下載的模塊,直接使用模塊名
    cssmin = require('gulp-cssmin'),    //譬如你要處理css壓縮，那麼你得確保已經npm install gulp-cssmin.這樣才能require
    jsmin = require('gulp-uglify');

/*gulp分配任務給指定的插件，由該插件輸入輸出式處理*/
//Css壓縮
gulp.task('cssmin',function () {        //cssmin是gulp調用執行時的任務名,隨意
    /*白話文:把什麼樣的文件，輸出給哪一個插件處理，結果再輸出到哪裏*/
    gulp.src('./public/mobile/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./release/css'));
});

//JS壓縮
gulp.task('jsmin',function () {
    gulp.src('./public/mobile/js/*.js')
        .pipe(jsmin())
        .pipe(gulp.dest('./release/js'));
});

[調用]

[gulp經常使用插件整理]

gulp-less         編譯LESS文件
gulp-autoprefixer 添加CSS私有前綴
gulp-cssmin       壓縮CSS
gulp-rname        重命名
gulp-imagemin     圖片壓縮
gulp-uglify       壓縮JS
gulp-concat       合併
gulp-htmlmin      壓縮HTML

插件寶庫在此
https://gulpjs.com/plugins/