項目實戰-Gulp使用

引言

在工做中，常常會遇到要把文件合併和壓縮等操做，我經歷過下面的演進過程：

• 使用ajaxmin工具手動合併和壓縮
• 使用Grunt合併和壓縮
• 使用Gulp合併和壓縮

這裏不探討Grunt和Gulp的優劣（詳細的對比 本身去看），看開發者本身的喜愛吧。

正文

1. 安裝NodeJS

目前（2015.09.28）的版本是 v4.1.1，前去如今 ， 【網站能進去，下載可能不行，應該是被牆了，和諧社會，大俠們各顯神通吧】，下載下來以後，直接安裝就能夠了。

2. 安裝Gulp環境

若是直接使用命令安裝Gulp會被牆掉，下載不下來，須要先修改默認鏡像爲國內鏡像，具體步驟以下：

1. 使用CMD命令進入node.js的node.exe所在目錄，運行命令：

   npm config set registry http://registry.cnpmjs.org/

2. 安裝npm全局環境，運行命令：

   npm install gulp –g

3. 項目中使用Gulp

1. 進入項目的適當位置（通常爲根本目錄或前端代碼的最上層），運行安裝本地Gulp環境，運行命令：

   npm install gulp --save-dev

2. 安裝css,js壓縮的環境，運行命令：

   npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint del --save-dev
   
    /////////////////
   
    1.css壓縮 　　gulp-minify-css
    2.js壓縮　　　gulp-uglify
    3.js合併　　　gulp-concat　
    4.重命名　　   gulp-rename
    5.js代碼檢測　 gulp-jshint　(或gulp-jslint)
    6.文件刪除    del

3. 新建文件名爲 gulpfile.js 文件，樣本文件：

   var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
        concat = require('gulp-concat'),
        uglify = require('gulp-uglify'),
        rename = require('gulp-rename'),
        del = require('del');
   
   
    //壓縮css
    gulp.task('minify_css',["clean"], function () {
        var cssSrc = ['./css/*.css'];
   
        return gulp.src(cssSrc)      //壓縮的文件
            .pipe(concat('all.css'))    //合併全部css到all.css
            .pipe(gulp.dest('./main/css'))   //輸出文件夾
            .pipe(rename({suffix: '.min'}))
            .pipe(minifycss())
            .pipe(gulp.dest('./main/css')); //執行壓縮
    });
   
    //壓縮js
    gulp.task('minify_js',["clean"], function() {
        var jsSrc = ['./lib/*.js','!./lib/*.src.js'];
   
        return gulp.src(jsSrc)
            .pipe(concat('all.js'))    //合併全部js到all.js
            .pipe(gulp.dest('./lib'))    //輸出all.js到文件夾
            .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
            .pipe(uglify())    //壓縮
            .pipe(gulp.dest('./lib'));  //輸出
    });
   
   
    //執行壓縮前，先刪除之前壓縮的文件
    gulp.task('clean', function() {
        return del(['./css/all.css', './css/all.min.css', './lib/all.js', './lib/all.min.js'])
    });
   
    // 默認任務
    gulp.task('default', function(){
        gulp.run('minify_css', 'minify_js');
    });

4. 根據業務需求修改 gulpfile.js

5. 直接運行gulp命令

6. 檢查壓縮文件，是否正常

作技術就是這樣，不少東西要先學會使用，再求深刻了解，但不能只停留在會使用的階段