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