項目實戰-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. 檢查壓縮文件，是否正常

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