gulp 壓縮js文件,將其變成一行.

• 同css加前綴一樣,先下載安裝node.js.(當然,如果已經安裝,那就自然沒必要重按)
• 然后通過node.js的npm插件下載各自文件插件

  利用cmd找到根目錄　　//如 f:[回車] cd webbg[回車]

  　　然后npm init　　//創建的一個工程目錄

  　　　　npm install -g bower　　//下載bower

  　　　　npm i -g gulp　　　　　//下載gulp

  　　　　npm i pump　　　　　 //下載pump

  　　　　npm i gulp-rename　　//下載gulp-rename插件,用於改名字

　　　　　　　npm i gulp-uglify　　　//下載gulp-uglify插件,用於壓縮js文件

• 編寫gulpfile.js,用於gulp調用,完成js自動壓縮

　　　　　　var gulp=require('gulp'),　　
　　　　　　　　pump=require('pump'),
　　　　　　　　rename=require('gulp-rename'),
　　　　　　　　uglify=require('gulp-uglify');

　　　　　　　　　　　　　　　　//定義各類文件插件,由於用逗號分割,所以不用重復使用var.

　　　　　　gulp.task('jsmin',function(cb){
　　　　　　　　pump([
　　　　　　　　　　gulp.src('js/*.js'),　　　　//同樣的載入路徑,星號(*)代表全部的.js文件
　　　　　　　　　　rename({'suffix':'.min'}),　　//這里是修改名字,在原有的名字后面+.min.應用到的是gulp-rename插件.
　　　　　　　　　　uglify(),　　　　　　　　//這是將js文件壓縮的調用函數.

　　　　　　　　　　gulp.dest('app/')　　　　//這是輸出的路徑,同樣沒有該文件的話,會自動創建.
　　　　　　　　　　],cb)
　　　　　　　　})

　

• gulp prefixer 調用

　　　　　在cmd根文件下輸入 gulp jsmin.　　//這里的jsmin 與 gulp.task('jsmin',function(cb){} 中的對應,且可以隨意命名,但必須一致.

 

事實上,無論是css+前綴,還是js壓縮,都是能放進一個js文件的.

var gulp=require('gulp');
var pump=require('pump');
var rename=require('gulp-rename');
var prefixer=require('gulp-autoprefixer');
var uglify=require('gulp-uglify');

gulp.task('prefixer',function(cb){
    pump([
            gulp.src('./style/*.css'),
            prefixer({
                borwsers:["last 2 version"],
                remove:true,
                cascade:false
            }),
            rename({'suffix':'.min'}),
            gulp.dest('./style')
        ],cb)
});

gulp.task('ugly',function(cb){
    pump([
        gulp.src('script/*.js'),
        rename({'suffix':'.min'}),
        uglify(),
        gulp.dest('script')
        ],cb)
})

gulp.task('default',['prefixer','ugly']);
//自動化處理

而這個gulp.task('default',['prefixer','ugly']);是自動處理全部的gulp.task()里的語句.調用時,只要在cmd中輸入gulp就行.