1.    使用nvm管理node.js版本

安装 nvm （node version manage)

下载地址：Releases · coreybutler/nvm-windows · GitHub

环境变量path:    nvm安装目录 

2.    使用npm 作为包管理工具

安装npm(node package manage)

使用淘宝镜像

nvm node_mirror https://npm.taobao.org/mirrors/node/

nvm npm_mirror https://npm.taobao.org/mirrors/npm/

使用6.4.0版本

nvm install 6.4.0

nvm use 6.4.0

3.    安装gulp

项目内使用gulp需要全局安装及项目下本地安装

全局安装

npm install -g gulp@3.9.1 

本地安装

进入项目下路径：npm install gulp@3.9.1 --save-dev

4.    配置gulp

下载安装所需包

创建gulp任务前：npm install gulp-cssnano --save-dev 压缩css文件

重命名文件名：npm install gulp-rename --save-dev

处理Js文件：npm install gulp-uglify --save-dev

合并多个文件：npm install gulp-concat --save-dev

图片压缩：npm install gulp-imagemin --save-dev

图片缓存（避免重复压缩）：npm install gulp-cache --save-dev

自动刷新浏览器：npm install browser-sync --save-dev

编写gulpfile.js文件内容

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");

// 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 () {

gulp.src(path.css +'*.scss')

.pipe(sass().on("error",sass.logError))

.pipe(cssnano())

.pipe(rename({"suffix":".min"}))

.pipe(gulp.dest(path.css_dist))

.pipe(bs.stream())

});

// 定义处理js文件的任务

gulp.task("js",function () {

gulp.src(path.js +'*.js')

// .pipe(sourcemaps.init())

        .pipe(uglify())

// .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']);