gulp-uglify 壓縮js

前提：已經安裝有安裝了node 和npm 環境

安裝gulp

假設已經安裝了node 和npm （淘寶的cnpm很適合國內使用）。

1、首頁全局安裝gulp。

1 npm install --global gulp 

2、其次局部安裝gulp。（注：局部安裝是安裝到你項目的根目錄，這是很多教程沒有清晰表明）

npm install gulp --save-dev

3、在項目根目錄下創建一個名為 gulpfile.js 的文件

// 引入 gulp及組件
var gulp = require('gulp');

gulp.task('default',function(){
    gulp.start('minify');
});

//JS處理
gulp.task("minify",function(){

    ... ...
   
})

4、運行gulp。（默認的名為 default 的任務（task）將會被運行，想要單獨執行特定的任務（task），請輸入 gulp <task> <othertask>）

gulp

5、安裝壓縮組件 gulp-uglify 

npm install  gulp-uglify --save-dev

在上述 gulpfile.js 的文件里，寫入：

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('default',function(){
    gulp.start('minify');
});

//JS處理
gulp.task("minify",function(){
    gulp.src(['./static/before/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./dest/after'))
})

運行gulp：

gulp

壓縮AngularJS代碼的時候，需要添加 ng-annotate 插件：

var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');

gulp.task('default',function(){
    gulp.start('minify');
});

//JS處理
gulp.task("minify",function(){
    gulp.src(['./static/before/*.js'])
        .pipe(ngAnnotate()) .pipe(ngmin({dynamic: false}))
        .pipe(uglify())
        .pipe(gulp.dest('./dest/after'))
})

還有package.json中需要添加相應的：（即運行：npm install --save-dev gulp-ng-annotate 和 npm install --save-dev gulp-ngmin）

{
  "name": "application-name",
  "version": "0.0.1",
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-jshint": "^2.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-ng-annotate": "^2.1.0", "gulp-ngmin": "^0.3.0",
    "gulp-notify": "^3.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0"
  }
}

 

合並和壓縮JS、CSS文件

壓縮JS，CSS文件需要引用如下組件：

gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合並文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夾

gulp-notify:提示

【關於 gulp中報錯 Task 'default' is not in your gulpfile 的解決方式】

在末尾加上一個default任務就可以解決，即在gulpfile,js中添加default方法：

gulp.task('default',function(){
    gulp.start('minify');
});