前端環境安裝

node

node -v

• 去 https://nodejs.org/en/下載安裝文件安裝便可。
• 安裝完成後，在終端輸入node -v回車打印出nodejs的版本號，說明nodejs安裝成功。
• 在終端輸入npm -v

回車打印出npm的版本號，說明npm也安裝成功(node安裝包中已集成了npm,所以在安裝nodejs的同時也安裝了npm)。

npm

npm -v

因爲https://www.npmjs.com在國內訪問不穩定，所以建議使用國內鏡向站點https://npm.taobao.org
具體方法以下：

• 經過config命令

  npm config set registry https://registry.npm.taobao.org

• 命令行指定

  npm --registry https://registry.npm.taobao.org info underscore

• 編輯 npmrc文件，在該文件中加入registry = https://registry.npm.taobao.org

這個在windows下找到了npmrc。 mac下暫時還沒找到。

gulp

• 在終端輸入npm install gulp -g
• 安裝完成後，一樣輸入gulp -v輸出相應的版本號，則說明安裝成功。

至此gulp安裝完成

1. 配置項目

---

下面以一個簡單案例來作演示：創一個gulp文件夾做爲項目根目錄，項目結構以下：!

咱們以經常使用的 gulp-uglify、gulp-concat、gulp-minify-css爲例。
先是配置package.json文件，有三種方法：

• 能夠用記事本之類的建立一個
• 用npm init建
• 也能夠複製以前項目的建立好的package.json

咱們用npm init 的方法來建立package.json
在終端將當前目錄切換至項目所在目錄，而後輸入npm init，一路回車，最終在項目根目錄下生成package.json:

{
  "name": "gulp_test", /*項目名,切記這裏命名不要與模塊同樣，如命名爲gulp，要地安裝gulp時就會出錯*/
  "version": "1.0.0", /*版本號*/
  "description": "", /*描述*/
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "", /*做者*/
  "license": "ISC" /*項目許可協議*/
}

註釋是我本身加的，npm init生成是沒有註釋的，並且json文件也不支持註釋，這點得注意！

1. 本地安裝gulp及gulp插件

---

本地安裝gulp

npm install gulp --save-dev

安裝完成後，咱們再看項目中的變化：
如圖：

1. gulp模塊下載到項目中的node_modules文件夾中。
2. package.json中寫入了devDependencies字段，並在該字段下填充了gulp模塊名

--svae-dev 的做用就是將剛纔安裝的模塊寫入package.json中。

你們可能會以爲有些奇怪，剛不是安裝了gulp嗎？對，那是全局安裝，爲的是能在端終運行gulp任務的，這裏是項目級別的安裝，真正的gulp模塊安裝到項目的node_modules/下了，後面的插件都是依賴gulp模塊的。

本地安裝gulp插件

接下來安裝上面提到的三個插件,在終端中輸入
npm install --save-dev gulp-uglify gulp-concat gulp-minify-css
安裝完成，以下圖

1. 建立gulpfile.js文件

---

在項目根目錄下建立gulpfile.js文件，而後編寫以下代碼，這些代碼沒什麼好解釋的，具體能夠參考gulp的api

/*引入gulp及相關插件 require('node_modules裏對應模塊')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//壓縮
gulp.task('minify-css', function () {
    gulp.src('css/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css/'));
});
//
gulp.task('script', function () {
    gulp.src(['src/a.js',"src/b.js"])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
gulp.task('default',['minify-css','script']);

實際的項目確定沒這麼簡單，想一想咱們通常不可能對某幾個文件操做，應該是對一批文件操做，那樣的涉及到文件匹配的問題了，暫時不展開了。

1. 運行gulp

---

能夠看到，咱們在gulpfile.js建立了3個任務，實際上是兩個，最後一個是合併上面兩個任務。
而後咱們就能夠在終端來運行上面的做務了，在終端輸入

gulp minify-css

運行結果以下圖：在dist/css/目錄下生成了咱們壓縮後的css文件。

1. 用webStrom運行

---

到目前爲至，你們基本知道gulp在項目中的運用了，只少基本流程是沒問題了。可是，時刻使用終端仍是不怎麼方便的，下面咱們直接在webStrom中運行上面的gulp任務。
在webStrom中打開gulpfile.js文件 》右鍵選擇 Show Gulp Tasks 》Gulp面板上已經列出gulpfile.js建立的任務 》選中任務運行便可。
是否是很是方便!

小結

看似步驟很多，其實沒幾步，咱們是從零開如提及的主要是爲了演示整個過程理解其中的原理，對於通常用戶來講，nodejs npm應該早裝好了。
其實咱們主要須要作的以下：

1. 建立package.json，上面咱們使用的 npm init方法，實際操做中咱們通常是把以前建立好的package.json直接拿過來，放到項目根目錄下，而後 npm install 一下，這樣咱們要用到的gulp插件自動就安裝好了。
2. 編寫gulpfile.js,gulp就那麼些api，咱們經常使用到的可能就那些插件，因此咱們徹底能夠編寫一個gulpfile.js而後在此基礎上修改一下就好了。