一、安装配置nodejs
1.下载官网程序并安装在 D 盘
2.环境变量配置
1）在 node.js 的安装目录新建两个文件夹 node_global 和 node_cache
2）cmd 运行
npm config set prefix “D:\nodejs\node_global”npm config set cache “D:\nodejs\node_cache”
3）设置电脑环境变量，右键“我的电脑”=》属性=》高级系统设置=》环境变量新建环境变量
NODE_PATH，值为D:\nodejs\node_global\node_modulespath变量添加 D:\nodejs\node_global
4）测试是否配置成功，在cmd窗口中输入以下指定全局安装express模块
$ npm install -g express
# -g表示是全局安装 检查 D:\nodejs\node_global\node_modules 是否有 express 文件夹
5）国内镜像网站配置
npm install -g cnpm –registry=https://registry.npm.taobao.org
以后下载模块的时候，将npm替换成cnpm即可从淘宝镜像中下载模块：
cnpm install xx
二、npm init 初始化项目&package文件
npm init 生成 package文件，或则你可以自己手动生成
$ cd 文件目录
$ npm init
Press ^C at any time to quit.
//完成name,varsion….license项的信息填写后
Is this OK? <yes>
//下面我们输入yes,就完成了package.json包的建立.
当前项目目录下用命令 npm install 或 npm install –save-dev 安装是，
自动将 package.json 中的模块安装到 node-modules 文件夹下
目录结构：
├── gulpfile.js
├── config.js
├── package.json
└── node_modules
三、安装gulp（全局&项目内）
3.1 全局安装 gulp
$ npm install –global gulp-cli
$ gulp -v[18:35:45] CLI version 2.0.1
//得到gulp的版本号，确认安装成功
3.2 在项目中安装 gulp
$ npm install –save-dev
gulp 命令
#–save-dev是为了把插件包显示在package.json中，为了以后在其他地方的安装
$ gulp -vCLI version 2.3.0Local version 4.0.2
四、配置gulp任务&运行
1.在项目根目录创建一个 gulpfile.js 文件
2.配置你真正需要的 gulp 任务
cnpm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-notify gulp-plumber gulp-if minimist gulp-util cnpm install gulp-eslint browser-sync gulp-clean-css
压缩，代码质量检查，浏览器自动刷新
3.测试gulp任务
$ gulp watch
#执行任务
$ Ctrl+c
#退出任务
https://segmentfault.com/a/1190000009136917
var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
// sass的编译
var autoprefixer = require(‘gulp-autoprefixer’);
// 自动添加css前缀
var minifycss = require(‘gulp-minify-css’);
// 压缩css一行gulp-uglify 用于压缩 JS gulp-concat 合并文件
var notify = require(‘gulp-notify’);
// 加控制台文字描述用的
var plumber = require(‘gulp-plumber’);
// 监控错误 可以阻止 gulp 插件发生错误导致进程退出并输出错误日志
var gulpif = require(‘gulp-if’);
// 条件判断
var minimist = require(‘minimist’);
//命令行参数解析工具
var gutil = require(‘gulp-util’);
// 打印日志 log
var sequence = require(‘run-sequence’)
//同步执行任务
var browserSync = require(‘browser-sync’);
// 静态服务器和代理请求
/** * 错误输出 * * @param {any} error */
var onError = function(error){
var title = error.plugin + ‘ ‘ + error.name;
var msg = error.message;
var errContent = msg.replace(/\n/g, ‘\\A ‘);
// replace to `\A`, `\n` is not allowed in css content
// system notification
notify.onError({title: title,message: errContent,sound: true})(error);
// prevent gulp process exit
this.emit(‘end’);
};
/* 压缩 js */
gulp.task(‘script’, function() {
// 1. 找到文件
gulp.src(config.dev.script)
// 错误处理
.pipe(plumber(onError))
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest(config.build.script))})
/* 压缩 css */
gulp.task(‘cssmin’, function() {
console.log(‘cssmin’)
var AUTOPREFIXER_BROWSERS = [ ‘last 6 version’, ‘ie >= 6’, ‘ie_mob >= 10’, ‘ff >= 30’, ‘chrome >= 34’, ‘safari >= 7’, ‘opera >= 23’, ‘ios >= 7’, ‘android >= 4.0’, ‘bb >= 10’ ];
const hasFixFlag = (process.argv.slice(2).indexOf(‘–fix’) >= 0);
return gulp .src(config.dev.styles)
// 获取流的api
.pipe(plumber(onError))
// 错误处理
.pipe(sass()).on(‘error’, sass.logError))
.pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
//自动处理浏览器前缀[根据设置浏览器版本]
.pipe(gulpif(options.env === ‘production’, minifycss()))
////压缩css
.pipe(gulp.dest(config.build.styles))
// 写放文件的api
.pipe(reload({ stream: true }));
});
gulp.task(‘default’, function() {
// place code for your default task here
});
// 在命令行使用 gulp auto 启动此任务
gulp.task(‘auto’, function () {
// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch(‘js/*.js’, [‘script’])})
src用来获取流的方法，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息
gulp.src(globs[, options]);
globs 文件匹配模式(类似正则表达式)
例:使用数组的方式来匹配多种文件:
gulp.src([‘js/*.js’,’css/*.css’,’*.html’])
dest输出文件gulp.dest(path)
pipe管道，你可以暂时将 pipe 理解为将操作加入执行队列gulp.pipe()
watch监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为:
gulp.watch(glob[, opts], tasks);
task定义任务，内部使用的是Orchestrator(用于排序、执行任务和最大并发依赖关系的模块)，
其语法为：gulp.task(name[, deps], fn)
第一个参数是任务名，
第二个参数是任务内容run表示要执行的任务。
可能会使用单个参数的形式传递多个任务原则：
一个任务只做一件事情，方便后续监听；
设置环境变量并根据当前环境做不同处理；
html公用模板提取。
比如：公用head、footer；压缩js时，检查js文件语法错误；编译less，添加CSS前缀；给静态资源文件添加版本号，解决浏览器缓存的问题；重新定义文件打包之后的路径；编译es6语法；编译es6新增的方法，比如Object.assign()；
解决报错之后，服务挂掉的问题；
http://www.tuicool.com/articles/rURvuqR
https://segmentfault.com/a/1190000004527820#articleHeader10https://segmentfault.com/a/1190000011514257#articleHeader3
https://segmentfault.com/a/1190000009136917#articleHeader6
https://segmentfault.com/q/1010000005826920
https://segmentfault.com/a/1190000016236780?utm_source=tag-newesthttps://segmentfault.com/q/1010000008511012
https://segmentfault.com/a/1190000004527820#articleHeader15
http://www.tuicool.com/articles/rURvuqR
var requirejs = require(‘gulp-requirejs-simple’);
gulp.task(‘requirejs’,function(){
var fs = require(‘fs’),
fileList = [];
function walk(path){
var dirList = fs.readdirSync(path);
dirList.forEach(function(item){
if(fs.statSync(path + ‘/’ + item).isDirectory()){walk(path + ‘/’ + item);
}else{
fileList.push(item);
}});}
//由于require-simple目前只支持单个入口文件的打包，所以需要写一个遍历walk(‘app/html/js’);
fileList.forEach(function(item){
requirejs({
baseUrl: ‘dist’, //打包的根目录
name: ‘html/js/’+item.split(‘.’)[0], //文件名 不要.js
out: ‘dist/html/js/’+item, //输出文件名
mainConfigFile: ‘dist/html/js/’+item,
optimize: ‘uglify2’,
preserveLicenseComments: false,
generateSourceMaps: true,
})()})})