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": "surging2@qq.com"
       },
       "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"); //熱部署（即時刷新）
//定義一個任務，刷新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