前端自动化开发，搭建（第二篇）gulp工作流搭建

在第一篇中，我们已经搭建好了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']);
});