gulp
什么是gulp？ 基于node的自动化构建工具
gulp能干什么？
1 自动压缩JS文件
2 自动压缩CSS文件
3 自动合并文件
4 自动编译sass
5 自动压缩图片
6 自动刷新浏览器
7 自动编译ES6
...........
怎么安装gulp？
由于网络经常不好，考虑把npm换成cnpm，可以使用淘宝提供的镜像服务器
npm install cnpm -g --resgistry=https://resgistry.npm.taobao.org
装完查看版本，验证是否安装正确
cnpm -v
在项目中新建配置文件 package.json
初始化 npm init
//配置文件是为了将来项目迁移使用，测试demo时，可以不需要
{
"name": "test", //项目名称（必须）
"version": "1.0.0", //项目版本（必须）
"description": "This is for study gulp project !", //项目描述（必须）
"author": { //项目作者信息
"name": "surging",
"email": "surging2@qq.com"
},
"devDependencies": { //项目开发所依赖的模块,这个不用写，待会装完模块自动生成
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}
//由于json文件里是不能写注释的，所以实际开发的时候，记得把注释去掉当有一个新的项目需要建立，或者有人跟你合作开发时，不需要把项目中所有用到的依赖模块（文件大小可能上百兆）都上传到git
只需要给项目带上一个配置文件，而对方拿到项目后，只需要一个命令 npm install
Node就可以自动读取项目的配置文件，并将所有依赖模块自动下载，此外也记录了当前项目所使用的 包 信息
本地安装gulp
首先得进入项目的目录
npm install gulp --save-dev
--save--dev 就是用来修改刚才的node配置文件的，即将所依赖的模块信息添加到package.json中
错误：
出现这个错误的最大可能原因是你安装的这个依赖包和你的项目名字有冲突，请在 package.json 修改项目名称。
本地安装gulp插件，这里若之前安装过ruby环境，可以选择 gulp-ruby-sass ，
npm install gulp-ruby-sass --save-dev
没有ruby环境的可以安装gulp-sass （推荐）
npm install gulp-sass node-sass -D
两个插件的API略有不同，后续配置有所不同
新建gulpfile.js
gulp-ruby-sass方案：
//这是gulp的配置文件，放在项目根目录下
var gulp = require("gulp"); //如果你了解模块化，这种语法应该很熟悉吧？
var sass = require("gulp-ruby-sass"); //将sass编译模块加载进来
//给gulp定义一个任务，编译scss文件
gulp.task("compileSass", function () {
sass("scss/*.scss",{
style: "expanded"
}).pipe(gulp.dest("css"))
}); gulp-sass node-sass 方案：
var gulp = require('gulp');
var sass = require('gulp-sass') //sass编译
gulp.task('packscss', function () {
gulp.src('./src/styles/app.scss')
.pipe(sass().on('error', sass.logError)) //使sass编译出错时服务器不会停止
.pipe(gulp.dest('./dev/styles'))
})
很容易猜：
"compileSass" 这是任务的名字
"sass/*.scss" 这是源文件目录
style:"expanded" 这是指定编译后代码风格
gulp.dest("css") 这是指定生成文件的路径
在gulp中，所有的事情都是以任务的形式被定义的。就像我们写好一个函数，等待被调用一样
接下来我们返回命令行，执行这个任务
gulp compileSass
注：如果gulp命令不能使用，请再次全局安装gulp
npm install gulp -g
如果不想每次都使用命令行编译，我们可以再增加一个监听的任务
gulp.task('watchingSass',function (){
gulp.watch('scss/*.scss',['compileSass'])
});
//gulp.watch这个方法会实时监测文件的变化执行相应任务
//这样一旦检测到文件变化，都会自动执行compileSass任务，到达了实时编译的效果接下来我们回到命令行，执行命令
//dos窗口执行 gulp watchingSass //这样gulp就启动了一个监听任务，所有的scss文件就可以实时的自动编译了
举例： 浏览器自动刷新gulpfile.js -----
var gulp = require("gulp");
var connect = require("gulp-connect"); //热部署（即时刷新）
gulp.task("refreshHTML",function(){//定义一个任务，处理html
gulp.src("./*.html").pipe(connect.reload());//src用来读取，pipe用来输送
});
gulp.task("watch",function(){//监听任务
connect.server({//让connect启动一个服务器，这样它才能即时刷新浏览器
livereload:true
});
gulp.watch("./*.html", ["refreshHTML"]); //检测文件的变化，执行相应的任务
}); 结果如下：
启动的node的服务器，地址默认是 http://localhost:8080
举例：压缩、重命名JS文件gulpfile.js -----
var gulp = require("gulp");
var uglify = require("gulp-uglify"); //压缩JS模块
var rename = require("gulp-rename"); //重命名模块
var connect = require("gulp-connect"); //热部署（即时刷新）
//定义一个任务，刷新html
gulp.task("refreshHTML", function() {
//src用来读取，pipe用来输送
gulp.src("./*.html").pipe(connect.reload());
});
//定义一个任务，处理JS
gulp.task("js", function() {
gulp.src("js/*.js").pipe(uglify()).pipe(rename({
suffix: ".min"
})).pipe(gulp.dest("js/min"))
});
//监听任务
gulp.task("watch", function() {
//让connect启动一个服务器，这样它才能即时刷新浏览器
connect.server({
livereload: true
});
//检测HTML文件的变化，执行刷新任务
gulp.watch("./*.html", ["refreshHTML"]);
//检测JS文件的变化，执行JS任务
gulp.watch("./js/*.js", ["js"]);
});举例： 编译ES6
安装 gulp-babel
=> npm install gulp-babel => npm install babel-preset-es2015
若出现一下错误：
是因为 gulp-babel 所依赖的babel-core 没有自动安装，则手动安装
npm install babel-core
加载并使用 gulpfile.js ----
var gulp = require("gulp");//加载gulp
var uglify = require("gulp-uglify"); //加载压缩js模块
var babel = require("gulp-babel"); //编译ES6
gulp.task("compileJS", function() { //任务名：function(){}
gulp.src("./js/*.js") // ./ 当前目录 * 代表全部
.pipe(babel({
presets: ["es2015"]//转为es5
}))
.pipe(uglify()) //压缩
.pipe(gulp.dest("./minjs/"))//输出目录
})
安装基于sass的移动端框架：yo3
npm install yo3 -D
找到图中在node_modules->yo3下找到style就是所需要的样式
比较完整的gulpfile.js配置：
var gulp = require("gulp");//加载gulp
var babel = require("gulp-babel"); //编译ES6
var sass = require("gulp-ruby-sass"); //编译scss
var uglify = require("gulp-uglify"); //压缩JS
var connect = require("gulp-connect"); //即时刷新,connect服务器
gulp.task("compileJs", function(){ // 处理js文件
gulp.src("./gulp/jsSource/*.js") // 源文件
.pipe( babel({
presets : ["es2015"] //将ES6转译为ES5
}) )
//.pipe(uglify()) //压缩
.pipe( gulp.dest("./js/modules") ); // 编译后文件存放位置
});
gulp.task("compileSass", function(){ //编译sass
sass("./gulp/scssSource/*.scss", { //源文件
style : "expanded" // 生成的代码主题
}).pipe( gulp.dest("./css/") ); // 编译后文件存放位置
});
gulp.task("refresh", function(){ //任务名：callback
gulp.src("./*.html").pipe(connect.reload()); //刷新页面
});
gulp.task("listening", function(){
connect.server({ //开启connect服务器，默认地址为http://localhost:8080
livereload:true, //开启热部署
port:8888
});
gulp.watch("./gulp/scssSource/*.scss", ["compileSass"]); //监听：源文件，当源文件改变时执行的任务
gulp.watch("./css/*.css", ["refresh"]);
gulp.watch("./gulp/jsSource/*.js", ["compileJs"]);
gulp.watch("./js/modules/*.js", ["refresh"]);
})
代理模式配置：
var gulp = require("gulp");//加载gulp
var babel = require("gulp-babel"); //编译ES6
var sass = require("gulp-ruby-sass"); //编译scss
var uglify = require("gulp-uglify"); //压缩JS
var connect = require("gulp-connect"); //即时刷新,connect服务器
var webserver = require("gulp-webserver") //webserver服务
var proxy = require('http-proxy-middleware') //webserver服务代理中间件
gulp.task("compileJs", function(){ // 处理js文件
gulp.src("./gulp/jsSource/*.js") // 源文件
.pipe( babel({
presets : ["es2015"] //将ES6转译为ES5
}) )
//.pipe(uglify()) //压缩
.pipe( gulp.dest("./js/modules") ); // 编译后文件存放位置
});
gulp.task("compileSass", function(){ //编译sass
sass("./gulp/scssSource/*.scss", { //源文件
style : "expanded" // 生成的代码主题
}).pipe( gulp.dest("./css/") ); // 编译后文件存放位置
});
gulp.task("refresh", function(){ //任务名：callback
gulp.src("./*.html").pipe(connect.reload()); //刷新页面
});
gulp.task("webserver", function () {
gulp.src('./')
.pipe(
webserver({
host: 'localhost',
port: 8000,
livereload: true,
directoryListing: {
enable: true,
path: './'
},
middleware: [
proxy('/shopdata',{//远程标识，url入口
target: 'http://datainfo.duapp.com/', // target host 需代理的域名
changeOrigin: true/*, // needed for virtual hosted sites
pathRewrite: {
"^/shopdata": "" // remove base path 路径转向 ,正则："",重写/activity
}*/
})
]
})
)
});
gulp.task('default', ["webserver"], function () {
gulp.watch("./gulp/scssSource/*.scss", ["compileSass","refresh"]); //监听：源文件，当源文件改变时执行的任务
gulp.watch("./gulp/jsSource/*.js", ["compileJs","refresh"]);
});
前端框架搭建：https://gitee.com/flqbestboy/projectModel