初識gulp

以前一直據說gulp是自動構建工具，可以自動完成一些重複的任務，提升工做效率。當開始接觸到sass才進一步瞭解它的強大。

什麼是gulp？

gulp時基於Nodejs的自動任務運行器，她能自動化地完成JavaScript、cofee、Sass、Less、HTML、image、CSS等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

gulp的使用

gulp大體能夠分爲幾個步驟：

1. 安裝nodejs

2. 全局安裝gulp

3. 項目安裝gulp以及gulp插件

4. 配置gulpfile.js

5. 運行任務

6. 安裝nodejs

安裝nodejs

nodejs官網
npm 經常使用命令

全局安裝gulp

1. 說明：全局安裝gulp目的是爲了經過她執行gulp任務；

2. 安裝：命令提示符執行npm install gulp -g；

3. 查看是否正確安裝：命令提示符執行gulp -v，出現版本號即爲正確安裝。

新建package.json

在項目下，能夠經過命令建立npm init

• package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件，不能添加任何註釋。。

• cnpm是淘寶提供的一個完整的npm.org鏡像

項目安裝gulp以及gulp插件

1. 在本身的項目下面運行npm install --save-dev <name>安裝對應的插件。

2. 這裏以gulp-sass爲例

   #本地安裝gulp
   #全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。
   npm install --save-dev gulp
   
   #在項目目錄下運行
   npm install --save-dev gulp-sass

新建gulpfile.js文件

說明：gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件（其實將gulpfile.js放入其餘文件夾下亦可）。

'use strict';
//導入工具包 require('node_modules裏對應模塊')
var gulp = require('gulp');//本地安裝gulp所用到的地方
var sass = require('gulp-sass');

//定義一個sass任務
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')//任務針對的文件
    .pipe(sass().on('error', sass.logError))//任務調用的模塊
    .pipe(gulp.dest('./css'));//生成路徑
});

//默認執行
gulp.test('default',['sass'])

//監放任務
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

在項目下建立gulpfile.js文件，相關API能夠點擊查看 gulp API gulp sass

在node_modules的gulp-sass目錄下，有一個gulp-sass的使用幫助文檔README.md；

運行gulp

命令提示符執行gulp 任務名稱；

執行gulp sass或者gulp default都將編譯sass，後者在可加入更多的任務。
執行gulp sass:watch將監放任務文件，當其改變時自動完成編譯。

參考資料

一點