gulp完成javascript壓縮合並,css壓縮

最近需要對項目進行優化,主要是對js的壓縮合並和css文件的壓縮,查找相關資料之后發現gulp可以實現相關的功能，特此分享一下使用心得。

1.安裝gulp

gulp是基於Node.js的前端構建工具。所以首先需要安裝nodejs，安裝nodejs。

完成nodejs安裝之后，需要使用npm安裝gulp。

先安裝全局gulp

npm install -g gulp

然后在項目根目錄下安裝本地gulp。

此時項目根目錄下會多出下面這個文件夾 node_modules

好的，現在gulp已經安裝完成了，但是gulp本身不提供js壓縮合並等功能，需要使用gulp的相關插件。目前只需要完成js壓縮合並和css文件壓縮的功能，先安裝相應的插件：

1.css壓縮 　　gulp-clean-css

2.js壓縮　　　gulp-uglify

3.js合並　　　gulp-concat　　

 

由於壓縮之前需要對js代碼進行代碼檢測，壓縮完成之后需要加上min的后綴，我們還需要安裝另外兩個插件：

4.重命名　　   gulp-rename

5.js代碼檢測　 gulp-jshint　(或gulp-jslint)

(更多插件可以查看 http://gulpjs.com/plugins/ )

在項目根目錄下執行以下命令：

npm install gulp-clean-css gulp-uglify gulp-concat gulp-rename --save-dev
npm install jshint gulp-jshint --save-dev

安裝好的插件會出現在上面提到的node_modules文件夾中。

2.使用gulp

ok，現在可以使用gulp了，在項目根目錄下創建gulpfile.js文件。

在gulpfile.js中添加以下代碼

var gulp = require('gulp'),
　　//代替 minifycss
　　cleanCSS = require('gulp-clean-css'),
　　//minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    jshint=require('gulp-jshint');

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

    //壓縮css
    gulp.task('minifycss', function() {
        return gulp.src('css/*.css')    //需要操作的文件
            .pipe(rename({suffix: '.min'}))   //rename壓縮后的文件名
            .pipe(cleanCSS({compatibility: 'ie7'}))   //執行壓縮

            .pipe(gulp.dest('Css'));   //輸出文件夾
    });

    //壓縮,合並 js
    gulp.task('minifyjs', function() {
        return gulp.src('js/*.js')      //需要操作的文件
            .pipe(concat('main.js'))    //合並所有js到main.js
            .pipe(gulp.dest('js'))       //輸出到文件夾
            .pipe(rename({suffix: '.min'}))   //rename壓縮后的文件名
            .pipe(uglify())    //壓縮
            .pipe(gulp.dest('Js'));  //輸出
    });

　　//默認命令，在cmd中輸入gulp后，執行的就是這個任務(壓縮js需要在檢查js之后操作)
    gulp.task('default',['jshint'],function() {
        gulp.start('minifycss','minifyjs'); 
　　});

上述代碼中的相關方法可以查看 gulp API docs

 

在文件根目錄下執行gulp命令：

(如果Js文件有問題時，會出現相應的error提示，按照提示的錯誤信息修改即可)

bingo，現在可以在css文件夾中看到壓縮好的css文件，在js中可以看到合並壓縮好的main.min.js 。任務完成，只需要將html中css，js引用的路徑修改成新的路徑即可。

 

以上便是使用gulp的心得體會，gulp是一個正在快速成長的構建工具，他還有很多其他好用的工具(例如watch功能，可以實時監視文件的變化，自動完成相關操作)。以后可以繼續關注、研究gulp，更多的應用gulp到前端開發中。

 

PS:  2016.9.12 更新了 gulp-jshint 的獲取方式，用 gulp-clean-css 替換了 gulp-minify-css