前端自动化开发，搭建（第二篇）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 fieldsand exactly what they do.Use `npm install <pkg> --save` afterwards to install a package andsave 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']);});