我們接着昨天的繼續 （4） css檔案壓縮 安裝： 指令行輸入：cnpm install --save-dev gulp-minify-css
使用： var gulp = require('gulp'); //導入gulp子產品 重要 minifyCss = require('gulp-minify-css'); gulp.task('minify-css',function(){ gulp.src('css/*.css') //要壓縮的檔案 .pipe(minifyCss()) //壓縮css .pipe(gulp.dest('dist/css')); }) 運作任務，指令行輸入：gulp minify-css
壓縮前：
壓縮後：
（5） html檔案壓縮 安裝： 指令行輸入：cnpm install --save-dev gulp-minify-html
使用： var gulp = require('gulp'); //導入gulp子產品 重要 minifyHtml = require('gulp-minify-html'); gulp.task('minify-html',function(){ gulp.src('html/*.html') //要壓縮的檔案 .pipe(minifyHtml()) //壓縮html .pipe(gulp.dest('dist/html')); }) 運作任務，指令行輸入：gulp minify-html
壓縮前：
壓縮後：
（6） 檔案合并 安裝： 指令行輸入：cnpm install gulp-concat
使用： var gulp = require('gulp'); //導入gulp子產品 重要 concat = require('gulp-concat'); gulp.task('concat',function(){ gulp.src('script/*.js') //要合并的檔案 .pipe(concat('all.js')) //合并比對到的js檔案并命名為'all.js' .pipe(gulp.dest('dist/js')); }) concat = require('gulp-concat'); 運作任務，指令行輸入：gulp concat
合并前我們的script檔案中有一個jquery.js,我把它複制了幾份
執行上述代碼之後：合并後的代碼是dist檔案夾下的js檔案夾下的all.js檔案
這個就是合并後的代碼。 （7） 圖檔壓縮 安裝： 指令行輸入：cnpm install gulp-imagemin //壓縮圖檔的插件
指令行輸入：cnpm install imagemin-pngquantn //壓縮png圖檔的插件
使用： var gulp = require('gulp'); //導入gulp子產品 重要 var imagemin = require('gulp-imagemin'); //圖檔壓縮插件 var pngquant = require('gulp-pngquant'); //png圖檔壓縮插件 gulp.task('default',function(){ gulp.src('./*') //要壓縮的檔案 .pipe(imagemin({ progressive:true, use:[pngquant()] //使用pngquant來壓縮png圖檔 })) .pipe(gulp.dest('dist')); }) concat = require('gulp-concat'); 運作任務，指令行輸入：gulp //預設任務名，預設'default' 壓縮後的圖檔比原圖小 （8） 自動重新整理：當我們修改了代碼後，它可以幫助我們自動重新整理頁面，該插件最好配合谷歌浏覽起來使用，且要安裝livereload chrome extendsion擴充插件 安裝：gulp-livereload 使用：這個要借助網頁代理或者是第三方插件下載下傳，推薦使用Browsersync,有興趣的同學可以自行學習。 （9） less和sass的編譯 我們在這裡以sass為例說明： 安裝：cnpm install gulp-sass
使用： sass = require('gulp-sass'); gulp.task('compile-sass',function(){ gulp.src('sass/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')); }) 在這裡我們建立了一個scss檔案，将這個檔案編譯成css檔案
執行任務，指令行輸入:gulp compile-sass
編譯完成後，我們可以在dist檔案夾下的css檔案夾中看到編譯後的css檔案
這樣就将我們的scss檔案編譯成css檔案
注：上述使用中的代碼均在gulpfile.js中寫入 （前端新人，如有錯誤，歡迎指正！）