gulp

gulp

---

什么是gulp？ 基于node的自动化构建工具

gulp能干什么？

1  自动压缩JS文件

2  自动压缩CSS文件 

3  自动合并文件

4  自动编译sass

5  自动压缩图片

6  自动刷新浏览器

7  自动编译ES6

...........

怎么安装gulp？

因为它基于nodeJS，因此需要先安装node环境

安装完成后，打开你的命令行窗口

输入： node -v

检测一下node是否安装好了

由于网络经常不好，考虑把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": "[e-mail]"       },       "devDependencies": {    //项目开发所依赖的模块,这个不用写，待会装完模块自动生成              "gulp": "^3.8.11",               "gulp-less": "^3.0.0"        }}//由于json文件里是不能写注释的，所以实际开发的时候，记得把注释去掉

注：package.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"); //热部署（即时刷新）//定义一个任务，刷新htmlgulp.task("refreshHTML", function() {//src用来读取，pipe用来输送gulp.src("./*.html").pipe(connect.reload());});//定义一个任务，处理JSgulp.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");//加载gulpvar uglify = require("gulp-uglify"); //加载压缩js模块var babel = require("gulp-babel"); //编译ES6gulp.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");//加载gulpvar babel = require("gulp-babel"); //编译ES6var sass = require("gulp-ruby-sass"); //编译scssvar uglify = require("gulp-uglify"); //压缩JSvar 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(){ //编译sasssass("./gulp/scssSource/*.scss", { //源文件style : "expanded" // 生成的代码主题}).pipe( gulp.dest("./css/") ); // 编译后文件存放位置});gulp.task("refresh", function(){ //任务名：callbackgulp.src("./*.html").pipe(connect.reload()); //刷新页面});gulp.task("listening", function(){connect.server({ //开启connect服务器，默认地址为http://localhost:8080livereload: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");//加载gulpvar babel = require("gulp-babel"); //编译ES6var sass = require("gulp-ruby-sass"); //编译scssvar uglify = require("gulp-uglify"); //压缩JSvar 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(){ //编译sasssass("./gulp/scssSource/*.scss", { //源文件style : "expanded" // 生成的代码主题}).pipe( gulp.dest("./css/") ); // 编译后文件存放位置});gulp.task("refresh", function(){ //任务名：callbackgulp.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