在第一篇中，我們已經搭建好了node的環境，以及npm環境，那麼接下來搭建gulp的工作流，這裡需要用到之前的知識，如果不太熟悉的小夥伴，可以先去學習一下第一篇，

http://blog.csdn.net/s8460049/article/details/52396399  這是入口

1.初始化npm配置檔案

輸入命令：

npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp_demo)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\27183\Documents\HBuilderProject\nodejs\gulp_demo\package.json:

{
  "name": "gulp_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)
 

出現上列東西，一路回車敲下來就可以了，上面這段的意思就是生成一個npm的配置檔案package.json,這個配置裡管理著我們所依賴的包，開發所依賴的包，以及專案的名稱，作者，版本資訊，git地址，關鍵字等等，，初始化的時候，直接設定預設就可以了，後面有需求在修改配置檔案也可以

形成的這個配置檔案，可以方便我們在任何地方，重新構建專案，比如平常我們如果拷貝專案，需要把專案依賴的各種外掛包以及工具，以及我們的原始碼都拷貝，

但是通過這個管理之後，我們只需要拷貝原始碼，以及這個配置檔案，然後在其他地方需要重新構建專案的時候，只需要把配置檔案複製到專案跟目錄，開啟命令列視窗，

輸入 npm install，就會根據這個配置檔案構建專案，類似於java的maven，

2.新增一個gulp的依賴

命令列輸入命令

npm install gulp --save-dev

--save-dev的意思是將這個包的依賴存入配置檔案package.json中，且作為開發依賴來存入， --save就是將我們安裝的包名字和包版本記錄到配置檔案中的dependencies節點中 --save-dev  專案依賴分兩種，一個就是普通的專案依賴比如bootstrap，還用一種只是開發階段需要用的，這種屬於開發依賴比如gulp，開發依賴最終記錄在devDependencies節點裡面

3.構建gulpfile.js

在專案的根目錄，新建一個gulpfile.js的檔案，這個是gulp的主執行檔案，且檔名是固定的，不能修改，gulp命令執行的時候，會去找這個檔案。 然後介紹幾個gulp的常見的一些工作流，如果自己的專案有特殊的工作流需要，可以去gulp的官網學習一下這個命令 http://www.gulpjs.com.cn/docs/getting-started/  這個是中文網
http://gulpjs.com/   這個是官網
然後下載好，我們要用到的外掛  npm install gulp-less gulp-concat gulp-uglify gulp-minify-css gulp-htmlmin --save-dev

4.編寫gulp邏輯

/*
 * @Author: sunlandong
 * @Date:   2016-09-03 15:54:36
 * @Last Modified by:   sunlandong
 * @Last Modified time: 2016-09-03 15:54:36
 */

'use strict';

/**
 * 1.less的編譯，壓縮，合併
 * 2.js的混淆，壓縮，合併
 * 3.img的複製
 * 4.html的壓縮
 */
//載入依賴包gulp,require裡的名字就是npm install的包名
var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var concat = require("gulp-concat")
 //1.less的編譯，壓縮，合併,這裡沒有合併，因為用了less，預處理已經可以導包了
gulp.task('style',function(){
	//任何執行的程式碼
	gulp.src(['src/styles/*.less','!src/styles/_*.less'])
		.pipe(less())
		.pipe(minifyCSS())
		.pipe(gulp.dest('dist/styles'))
		.pipe(browserSync.reload({
			stream:true
		}));
});

//2.js的混淆，壓縮，合併
var uglify = require('gulp-uglify');
gulp.task('script',function(){
	gulp.src('src/scripts/*.js')
		.pipe(concat('all.js'))
		.pipe(uglify())
		.pipe(gulp.dest('dist/scripts'))
		.pipe(browserSync.reload({
			stream:true
		}));
});

//3.img的複製

gulp.task('image',function(){
	gulp.src('src/images/*.*')
		.pipe(gulp.dest('dist/images'))
		.pipe(browserSync.reload({
			stream:true
		}));
});


//4.html的壓縮
var htmlmin = require('gulp-htmlmin');
gulp.task('html',function(){
	gulp.src('src/*.html')
		.pipe(htmlmin({
			collapseWhitespace: true,
			removeComments: true
		}))
		.pipe(gulp.dest('dist/'))
		.pipe(browserSync.reload({
			stream:true
		}));
});


//測試http伺服器
var browserSync = require('browser-sync').create();
gulp.task('serve',function(){
	browserSync.init({
	    notify: false,
	    port: 2015,
	    server: {
	      baseDir: ['dist']
	    }
  	});
  	gulp.watch('src/styles/*.less',['style']);
  	gulp.watch('src/scripts/*.js',['script']);
  	gulp.watch('src/images/*.*',['image']);
  	gulp.watch('src/*.html',['html']);
});