gulp

3、安裝必要的Gulp插件

• 壓縮css（gulp-minify-css）
• js代碼校驗（gulp-jshint）
• 合併js文件（gulp-concat）
• 壓縮js代碼（gulp-uglify）
• 壓縮圖片（gulp-imagemin）
• 文件重命名 （gulp-rename）
• 自動刷新頁面（gulp-livereload）
• 更改提醒（gulp-notify）
• 合併js順序（gulp-order）（ https://github.com/sirlantis/gulp-order）

$  npm install gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-livereload gulp-rename --save-dev

安裝完後 package.json文件內容以下：

{
"name": "goodgis", "version": "1.0.0", "description": "", "main": "main.js", "directories": { "test": "test" }, "dependencies": { "gulp": "^3.9.0" }, "devDependencies": { "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-imagemin": "^2.4.0", "gulp-jshint": "^2.0.0", "gulp-livereload": "^3.8.1", "gulp-minify-css": "^1.2.1", "gulp-notify": "^2.2.0", "gulp-rename": "^1.2.2", "gulp-uglify": "^1.5.1", "jshint": "^2.8.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 

4、根目錄下建立gulpfile.js文件

代碼以下，做用看註釋

//引入插件 var gulp = require('gulp'), // minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), //代碼驗證檢查 uglify = require('gulp-uglify'), //壓縮js代碼 rename = require('gulp-rename'), //文件重命名 concat = require('gulp-concat'), //合併js文件 notify = require('gulp-notify'), //更改提醒 livereload = require('gulp-livereload'); //自動刷新頁面 //js代碼校驗、合併和壓縮（相似jquery的鏈式操做，牛） gulp.task('scripts', function() { return gulp.src('src/**/*.js') //源文件 .pipe(jshint('.jshintrc')) //一、校驗JS文件，jshint校驗規則 .pipe(jshint.reporter('default')) .pipe(concat('goodgis.js')) //二、合併js文件，goodgis.js爲合併的文件名稱 .pipe(gulp.dest('dist')) //合併後文件存放位置 .pipe(rename({ suffix: '.min' })) .pipe(uglify()) //三、執行壓縮任務 .pipe(gulp.dest('dist')) //壓縮後文件存放位置 .pipe(notify({ //四、操做結束後提示 message: 'Scripts task complete' })); }); // 默認任務，這裏徹底能夠是多個任務，好比壓縮CSS，壓縮圖片，壓縮js等 gulp.task('default',['watch'], function() { gulp.start('scripts'); }); // 監聽（前端自動化的情懷） gulp.task('watch', function() { // 監聽 .js文件改動，一旦改動就會自動壓縮合並 gulp.watch('src/**/*.js', ['scripts']); // Create LiveReload server（用來自動刷新瀏覽器） livereload.listen(); // Watch any files in dist/, reload on change gulp.watch(['dist/**']).on('change', livereload.changed); });