gulp实现自动化开发流程

nvm安装：
nvm（Node Version Manager）是一个用来管理node版本的工具。我们之所以需要使用node，是因为我们需要使用node中的npm(Node Package Manager)，使用npm的目的是为了能够方便的管理一些前端开发的包
1、 Mac或者Linux安装nvm：https://github.com/creationix/nvm
1、 Windows到这个链接下载nvm的安装包：https://github.com/coreybutler/nvm-windows/releases
2、 下载成功后把nvm所处的路径添加到环境变量中
nvm常用命令：
nvm install node：安装最新版的node.js。nvm i == nvm install。
nvm install [version]：安装指定版本的node.js 。
nvm use [version]：使用某个版本的node。
nvm list：列出当前安装了哪些版本的node。
nvm uninstall [version]：卸载指定版本的node。
nvm node_mirror [url]：设置nvm的镜像。
nvm npm_mirror [url]：设置npm的镜像。

node安装：nvm install 6.4.0，直接使用命令安装，可以选择需要安装的版本
node的服务器地址是https://nodejs.org/dist/，这个域名的服务器是在国外。因此会比较慢。因此我们可以设置一下nvm的源。
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

npm(Node Package Manager)在安装node的时候就会自动的安装了，前提条件是你需要设置当前的node的版本：nvm use 6.4.0。然后就可以使用npm了.
安装包分为全局安装和本地安装。全局安装是安装在当前node环境中，在可以在cmd中当作命令使用。而本地安装是安装在当前项目中，只有当前这个项目能使用，并且可以通过require引用
npm install express # 本地安装
npm install express -g # 全局安装
卸载包：npm uninstall [package]
更新包：npm update [package]
搜索包：npm search [package]
使用淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org 那么以后就可以使用cnpm来安装包了！

2. 安装gulp：
   gulp的安装非常简单，只要使用npm命令安装即可。但是因为gulp需要作为命令行的方式运行，因此需要在安装在系统级别的目录中。
   npm install gulp -g

因为在本地需要使用require的方式gulp。因此也需要在本地安装一份：
npm install gulp --save-dev

4.初始化npm init，确认后会自动生成package.json文件，然后npm install会依次进行安装如下安装包
{
“devDependencies”: {
“browser-sync”: “^2.26.3”,
“gulp”: “^3.9.1”,
“gulp-autoprefixer”: “^5.0.0”,
“gulp-cache”: “^1.0.2”,
“gulp-concat”: “^2.6.1”,
“gulp-concat-folders”: “^1.3.1”,
“gulp-cssnano”: “^2.1.3”,
“gulp-imagemin”: “^4.1.0”,
“gulp-rename”: “^1.4.0”,
“gulp-sass”: “^4.0.2”,
“gulp-sourcemaps”: “^2.6.4”,
“gulp-uglify”: “^3.0.1”,
“gulp-util”: “^3.0.8”
}
}

创建gulp任务后直接在终端执行gulp命令后就可以监听静态文件的修改，实现自动化开发流程，需要注意的是新创建的心态文件需要退出gulp后从新执行对应的任务，如gulp css后就会监听css样式文件的修改
var gulp = require(“gulp”);
var cssnano = require(“gulp-cssnano”);
var rename = require(“gulp-rename”);
var uglify = require(“gulp-uglify”);
var concat = require(“gulp-concat”);
var cache = require(‘gulp-cache’);
var imagemin = require(‘gulp-imagemin’);
var bs = require(‘browser-sync’).create();
var sass = require(“gulp-sass”);
// gulp-util：这个插件中有一个方法log，可以打印出当前js错误的信息
var util = require(“gulp-util”);
// sourcemaps是js出错的时候显示具体出错的地方，而不是压缩文件
var sourcemaps = require(“gulp-sourcemaps”);

var path = {
‘html’: ‘./templates//’,
‘css’: './src/css//’,
‘js’: ‘./src/js/’,
‘images’: ‘./src/images/’,
‘css_dist’: ‘./dist/css/’,
‘js_dist’: ‘./dist/js/’,
‘images_dist’: ‘./dist/images/’
};

// 处理HTML文件的任务
gulp.task(‘html’,function () {
gulp.src(path.html + ‘*.html’)
.pipe(bs.stream())
});

// 创建一个处理css的任务
gulp.task(‘css’,function () {
// 找到所有的css路径
gulp.src(path.css + ‘*.scss’)
.pipe(sass().on(“error”,sass.logError))
// 将所有的css文件压缩
.pipe(cssnano())
// 将压缩的文件添加一个后缀名
.pipe(rename({“suffix”:".min"}))
// 将压缩的文件存放在指定的路径下
.pipe(gulp.dest(path.css_dist))
// 使用stream这个函数在浏览器中做了更改才能显示出来
.pipe(bs.stream())
});

// 定义一个处理js文件的任务
gulp.task(‘js’,function () {
gulp.src(path.js + “*.js”)
// 先将js文件进行init操作，然后所有的文件都处理完成后在执行write,以后js代码出错了就能在游览器中显示具体在哪一行
.pipe(sourcemaps.init())
// 将所有的js文件丑化,使用util.log如果出现错误会直接打印出来就不会退出gulp了
.pipe(uglify()).on(“error”,util.log)
.pipe(rename({“suffix”:’.min’}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.js_dist))
.pipe(bs.stream())

});

// 定义一个处理图片文件的任务
gulp.task(‘images’,function () {
gulp.src(path.images + ‘.’)
.pipe(cache(imagemin()))
.pipe(gulp.dest(path.images_dist))
.pipe(bs.stream())
});

// 定义监听文件修改的任务
gulp.task(‘watch’,function () {
gulp.watch(path.html + ‘.html’,[‘html’]);
gulp.watch(path.css + '.scss’,[‘css’]);
gulp.watch(path.js + ‘.js’,[‘js’]);
gulp.watch(path.images + '.*’,[‘images’]);
});

// 创建一个服务器，以后只要代码修改了在浏览器中能马上更新
// 初始化browser-sync的任务
gulp.task(‘bs’,function () {
bs.init({
‘server’:{
‘baseDir’:’./’
}
})
});

// 创建一个默认的任务,执行创建服务器，以及监听文件的修改
// gulp.task(‘default’,[‘bs’,‘watch’]);
gulp.task(‘default’,[‘watch’]);

写本文章是希望可以帮助到别人，也方便以后自己复习，第一次写作有什么改进的地方，也希望博客朋友们提出宝贵的意见