nodejs+gulpjs壓縮js代碼

1.安裝node.js

　　下載地址：nodejs.org  或者  nodejs.cn

2.安裝gulp之前我們需要安裝nodejs的環境，檢測能夠正常使用npm后，我們用npm對gulp進行一次全局安裝

　　　npm install gulp -g

3.安裝好了以后我們建立一個test作為項目主路徑，然后在cmd里cd到這個路徑用npm對gulp進行依賴安裝

　　npm install gulp --save-dev

　安裝完成后test目錄如下：

　　

4.插件安裝-安裝gulp需要用到的插件

　　要使用gulp就必須使用gulp的插件，以下是我在網上搜索到的gulp插件：

　　sass的編譯（gulp-ruby-sass）

　　自動添加css前綴（gulp-autoprefixer）

　　壓縮css（gulp-minify-css）

　　js代碼校驗（gulp-jshint）

　　合並js文件（gulp-concat）

　　壓縮js代碼（gulp-uglify）

　　壓縮圖片（gulp-imagemin）

　　自動刷新頁面（gulp-livereload）

　　圖片緩存，只有圖片替換了才壓縮（gulp-cache）

　　更改提醒（gulp-notify）

　　清除文件（del）

需要哪個裝哪個就行。

　　依然使用npm安裝(在test文件夾下啟動git或者cmd)：

　　　　npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache gulp-less del --save-dev

5.建立一個存放待壓縮js的文件夾及一個放置壓縮后js的文件夾(我建立的in,out)

　　

6.gulpfile.js內容如下，可自己調整　　

/*引入gulp及相關插件 require('node_modules里對應模塊')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
//var concat = require('gulp-concat');
//css壓縮
gulp.task('css', function () {
    gulp.src('src/css/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('des/css/'));
});
//js壓縮
gulp.task('js', function () {
    gulp.src(['in/*.js'])
        .pipe(uglify({
            // 混淆變量名
            mangle: true,
            // 輸出時將所有的中文轉換為unicode
            output: {ascii_only: true}
            // 將所有壓縮后的代碼置於des/js/文件夾
        }))
        .pipe(gulp.dest('out/'));
});

7.在待壓縮的js文件夾，打開命令行輸入：

　　gulp js

　即可壓縮所有js

 

完畢，留待日后查看或修正添加