gulp的簡介這裡就不贅述了，最新對js和css壓縮有用webpack的，但是研究了一下，好麻煩，最終轉向gulp。

下面開始正式的壓縮步驟：

總體概略是：

安裝nodejs -> 全域性安裝gulp ->新建package.json檔案 -> 專案安裝gulp以及gulp外掛 -> 配置gulpfile.js -> 執行任務

最下面有百度盤整個專案的連結，可以直接下載下來然後安裝gulp後執行即可，裡面也有nodejs7.5.msi。

詳細步驟：

1、安裝nodejs

用瀏覽器開啟nodejs官網，點選綠色按鈕進行下載最新版的安裝檔案（.msi檔案），然後傻瓜式安裝即可。

簡單介紹下gulp在使用過程中的常用命令，開啟命令提示符執行命令（windows+r，輸入cmd回車即可）；

node  -v :檢視nodejs的版本；

npm  -v:檢視npm版本；

cd  需要進入的目錄，如：cd  d:\qq

cls :清屏

     2、全域性安裝gulp

全域性安裝gulp是為了通過它來執行gulp任務。

安裝：在命令列中輸入npm install gulp -g;

如果在命令列中輸入gulp -v，出現版本號，則說明安裝成功。

注：安裝時出現的WARN不用理會，不會影響你的安裝及使用！

     3、在專案目錄建立package.json檔案

package.json是基於nodejs專案必不可少的配置檔案，它是存放在專案根目錄的普通json檔案；

建立方法：在你專案目錄上輸入cmd，回車，進入到命令列視窗，然後在命令列中輸入 npm init，回車，提示讓  你輸入專案相關資訊，直接回車即可，不輸入也沒有問題。

此時在你的專案目錄中建立了一個package.json的檔案，此檔案不需要你改動。

     4、在專案中安裝gulp及外掛

從現在開始以後的命令列操作都是在剛才開啟的命令提示符視窗中操作；

安裝方法：在命令提示符視窗中輸入npm install  gulp --save-dev， 然後回車，等待安裝完成。

  安裝完成後會在專案目錄下出現node_modules資料夾。

安裝壓縮js和壓縮css的外掛：在命令列中輸入npm install gulp-minify-css  gulp-uglify  --save-dev

    5、配置gulpfile.js檔案

在專案資料夾下建立gulpfile.js，js中內容大致如下：

var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify');
//壓縮js檔案，src中的陣列表示壓縮js下的和js下的資料夾中和js下資料夾下的資料夾中的所有js檔案
gulp.task("compressJS",function(){
gulp.src(['js/*','js/*/*.js','js/*/*/*.js']).pipe(uglify()).pipe(gulp.dest('./mini/js'));
})
gulp.task("compressCSS",function(){
gulp.src(['css/*.css','css/*/*.css','css/*/*/*.css']).pipe(minifycss()).pipe(gulp.dest('./mini/css'));
})
gulp.task('default',['compressJS', 'compressCSS']);

說明：gulp.dest('./mini/js)，表示將壓縮的檔案存放到mini/js資料夾下，目錄結構與壓縮前的目錄結構一致；

  6、執行壓縮命令

直接在命令提示符視窗輸入gulp即可，它會自動執行gulp.task預設的default方法，即compressJS和compressCSS方法；

專案最後的結構如下圖：

壓縮前後文件大小的對比如下圖：

百度盤連結：http://pan.baidu.com/s/1kU5xKqV