gulp构建工作流

gulp构建工作流以及gulpfile.js文件

### 步骤：
1. 命令行创建npm的配置文件
	a. npm init（这时候生成一个package.json的文件）
2. 添加一个gulp的依赖
	npm install gulp --save-dev 
3. 在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是固定的

4. 在gulpfile中抽象我们需要做的任务
	需要做的任务有：1. LESS编译 压缩 合并
					2. JS合并 压缩 混淆
					3. img复制
					4. html压缩
	这个时候要在src中写源文件，写完之后要将这些源文件发布到dist目录中
5. 添加less的编译需要插件，所以要在根目录下安装
	npm install gulp-less gulp-concat gulp-uglify gulp-cssnano gulp-htmlmin --save-dev
	（其中包括的功能有less编译，压缩合并，js合并压缩混淆，img复制）
	包下载好之后要将包导入
6.  启用自动化同步服务器的功能
	npm install browser-sync --save-dev 
7.完整的gulpfile.js文件代码

		'use strict';
		/**
		 * 1. LESS编译 压缩 合并
		 * 2. JS合并 压缩 混淆
		 * 3. img复制
		 * 4. html压缩
		 */
		
		// 在gulpfile中先载入gulp包，因为这个包提供了一些API
		var gulp = require('gulp');
		var less = require('gulp-less');
		var cssnano = require('gulp-cssnano');
		
		// 1. LESS编译 压缩 --合并没有必要，一般预处理CSS都可以导包
		gulp.task('style', function() {
		  // 这里是在执行style任务时自动执行的
		  gulp.src(['src/styles/*.less', '!src/styles/_*.less'])
		    .pipe(less())
		    .pipe(cssnano())
		    .pipe(gulp.dest('dist/styles')) //这里不用写styles文件夹，会自动创建
		    .pipe(browserSync.reload({
		      stream: true
		    }));
		});
		
		var concat = require('gulp-concat');
		var uglify = require('gulp-uglify');
		
		// 2. JS合并 压缩混淆
		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. 图片复制
		gulp.task('image', function() {
		  gulp.src('src/images/*.*')
		    .pipe(gulp.dest('dist/images'))
		    .pipe(browserSync.reload({
		      stream: true
		    }));
		});
		
		var htmlmin = require('gulp-htmlmin');
		// 4. HTML
		gulp.task('html', function() {
		  gulp.src('src/*.html')
		    .pipe(htmlmin({
		      collapseWhitespace: true,
		      removeComments: true
		    }))
		    .pipe(gulp.dest('dist'))
		    .pipe(browserSync.reload({
		      stream: true
		    }));
		});
		
		var browserSync = require('browser-sync');
		gulp.task('serve', function() {
		  browserSync({
		    server: {
		      baseDir: ['dist']
		    },
		  }, function(err, bs) {
		    console.log(bs.options.getIn(["urls", "local"]));
		  });
		
		  gulp.watch('src/styles/*.less',['style']);
		  gulp.watch('src/scripts/*.js',['script']);
		  gulp.watch('src/images/*.*',['image']);
		  gulp.watch('src/*.html',['html']);
		});