安裝
-
安裝淘寶npm鏡像：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org之后可將
npm修改為cnpm -
首先我們要全局安裝一遍：
sudo npm install gulp -g- sudo是以管理員身份執行命令，一般會要求輸入電腦密碼
- npm是安裝node模塊的工具，執行install命令
- -g表示在全局環境安裝，以便任何項目都能使用它
- 最后，gulp是將要安裝的node模塊的名字
屏幕快照 2016-07-22 08.44.11.png -
驗證是否正確安裝
輸入
gulp -v驗證gulp正確安裝。 -
到項目目錄下安裝一遍
命令行輸入
cd 當前項目路徑，到達當前項目目錄后，執行
npm install gulp --save-dev使用
—-save-dev來更新package.json文件，更新devDependencies值，以表明項目需要依賴gulp。屏幕快照 2016-07-22 08.49.04.png
安裝gulp插件
我們將要使用Gulp插件來完成我們以下任務：
| 插件名稱 | 插件說明 |
|---|---|
| gulp-htmlmin | 壓縮html |
| gulp-ruby-sass | sass的編譯 |
| gulp-autoprefixer | 添加CSS前綴 |
| gulp-clean-css | 壓縮css |
| gulp-concat | 合并文件 |
| gulp-uglify | 壓縮js |
| gulp-imagemin | 壓縮圖片 |
| gulp-ng-annotate | 添加angular依賴注入 |
| gulp-strip-debug | 去掉控制器log等語句 |
| gulp-ngmin | 壓縮angularJs |
| gulp-rename | 重命名文件 |
| gulp-livereload | 自動刷新頁面 |
| gulp-cache | 圖片緩存 |
| gulp-notify | 更改提醒 |
| del | 清除文件 |
安裝以上所有插件需要運行如下命令：
npm install gulp-htmlmin gulp-ruby-sass gulp-autoprefixer gulp-clean-css gulp-concat gulp-uglify gulp-imagemin gulp-ng-annotate gulp-strip-debug gulp-ngmin gulp-rename gulp-livereload gulp-cache gulp-notify del --save-dev
加載插件
接著在項目目錄下創建一個gulpfile.js文件，用于配置加載插件：
引入插件：
var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-clean-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del'),
ngAnnotate = require('gulp-ng-annotate'),
stripDebug = require('gulp-strip-debug'),
ngmin = require('gulp-ngmin');
建立任務
- 編譯sass、自動添加css前綴和壓縮
以下代碼的主要目的：首先我們編譯sass，添加前綴，保存到我們指定的目錄下面，還沒結束，我們還要壓縮，給文件添加.min后綴再輸出壓縮文件到指定目錄，最后提醒任務完成了。
gulp.task('styles', function() {
return gulp.src('src/www/main.scss')
.pipe(sass({ style: 'expanded' }))//將sass文件編譯為css
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))//添加css前綴
.pipe(gulp.dest('dist/assets/css'))//保存到指定文件夾
.pipe(rename({ suffix: '.min' }))//重命名文件，添加.min
.pipe(minifycss())//壓縮css
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));//提示
});
解釋一下：
gulp.task('styles', function () {...});
gulp.task這個API用來創建任務，在命令行下可以輸入
gulp styles來執行上面的任務。
return gulp.src('src/styles/main.scss')
gulp.src這個API設置需要處理的文件的路徑，可以是多個文件以數組的形式[main.scss, vender.scss]，也可以是正則表達式/ * / * .scss。
.pipe(sass({ style: 'expanded' }))
我們使用.pipe()這個API將需要處理的文件導向sass插件，那些插件的用法可以在github上找到，為了方便大家查找我已經在上面列出來了。
.pipe(gulp.dest('dist/assets/css'));
gulp.dest()API設置生成文件的路徑，一個任務可以有多個生成路徑，一個可以輸出未壓縮的版本，另一個可以輸出壓縮后的版本。
為了更好的了解Gulp API，強烈建議看一下Gulp API文檔，其實Gulp API就這么幾個。
樣例
以下是我自己創建的任務，僅供參考：
-
壓縮html
gulp.task('htmlmin', function() { //壓縮html return gulp.src('src/www/index.html') .pipe(htmlmin({ removeComments: true, //清除HTML注釋 collapseWhitespace: true, //壓縮HTML minifyJS: true, //壓縮頁面JS minifyCSS: true //壓縮頁面CSS })) .pipe(gulp.dest('dist/www/')) .pipe(notify({ message: 'htmlmin task complete' })); }); -
壓縮js
gulp.task('minCom', function() { //壓縮comm.js return gulp.src('src/www/app/comm.js') .pipe(rename({ suffix: '.min' }))//重命名 .pipe(uglify())//壓縮js .pipe(gulp.dest('dist/www/js')) .pipe(notify({ message: 'minCom task complete' })); }); -
壓縮圖片
gulp.task('img', function() { return gulp.src('src/www/img/*') .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true, })) //壓縮圖片 .pipe(gulp.dest('dist/www/img')) .pipe(notify({ message: 'Images task complete' })); });
這個任務使用imagemin插件把所有在src/images/目錄以及其子目錄下的所有圖片（文件）進行壓縮，我們可以進一步優化，利用緩存保存已經壓縮過的圖片，使用之前裝過的gulp-cache插件，不過要修改一下上面的代碼，將這行代碼:
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
修改成:
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
現在，只有新建或者修改過的圖片才會被壓縮了。
- 清理數據
在任務執行前，最好先清除之前生成的文件：
gulp.task('clean', function(cb) {
del(['dist/www/css', 'dist/www/js'], cb)
});
在這里沒有必要使用Gulp插件了，可以使用NPM提供的插件。我們用一個回調函數（cb）確保在退出前完成任務。
- 壓縮angularJs
合并壓縮angularJs，保證依賴
gulp.task('Angularjs', function() { //合并壓縮angular.js
return gulp.src([
'src/www/app/main.js',
'src/www/app/map/init.js',
])
.pipe(ngAnnotate())
.pipe(ngmin({ dynamic: false }))
.pipe(stripDebug())
.pipe(uglify({ outSourceMap: false }))
.pipe(concat('all.min.js'))
.pipe(gulp.dest('dist/www/js'));
});
設置默認任務（default）
我們在命令行下輸入gulp執行的就是默認任務，現在我們為默認任務指定執行上面寫好的三個任務：
gulp.task('default', ['clean'], function() {
gulp.start( 'htmlmin', 'styles', 'minCom', 'img');
});
在這個例子里面，clean任務執行完成了才會去運行其他的任務，在gulp.start()里的任務執行的順序是不確定的，所以將要在它們之前執行的任務寫在數組里面。
監聽文件
為了監聽文件的是否修改以便執行相應的任務，我們需要創建一個新的任務，然后利用gulp.watch API實現：
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
});
我們將不同類型的文件分開處理，執行對應的數組里的任務。現在我們可以在命令行輸入
gulp watch執行監聽任務，當.sass、.js和圖片修改時將執行對應的任務。
- 自動刷新頁面
Gulp也可以實現當文件修改時自動刷新頁面，我們要修改watch任務，配置LiveReload：
gulp.task('watch', function() {
// Create LiveReload server livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
要使這個能夠工作，還需要在瀏覽器上安裝LiveReload插件。
