前端自動化構建工具 gulp 學習筆記 1、

1、我對gulp的初期理解

是一種前端輔助開發工具 能夠幫你把js，css，img等文件 合併、壓縮,圖片好像是合併爲精靈圖，合併爲精靈圖以後，還會生成一個css樣式表。

官方解說是：基於流的自動化構建工具。

基於流：應該就是他的語法方式有點像jquery 那樣 如： $(".active").css("background":"red").addClass("default");像這樣一直點點下去。前一個表達式的輸出做爲後一個表達式的輸入，好像說是叫管道什麼的。

自動化：也就是他能夠監聽你某些文件的變化而作出相應 也就是執行某些任務，好比：你編輯好了一個css文件，保存時，它能夠自動的將你這個文件去執行壓縮，合併而後另存一份壓縮後的文件，還要就是 他能夠監聽你的文件變化，自動的刷新瀏覽器頁面，也就是好比你設置一個樣式，你不用去刷新瀏覽器，只要保存一下，瀏覽器就自動跟着刷新了。

這就是目前我對他的瞭解和嘗試。

2、獲得gulp

這個首先得知道nodejs,和npm,以前我一直據說nodejs我還覺得是個.js文件須要引入的，結果他竟然是個環境，就是讓js脫離瀏覽器執行的環境，安裝到電腦上後那些基於nodejs的工具之類的才能使用。

而npm呢是個管理器，有點像個下載安裝工具，只要你安裝好了nodejs那麼在控制檯用命令npm ** 就算是使用了 如npm install gulp -g這種，全局安裝gulp，那麼他就會下載安裝gulp，就像迅雷之類的，只是他主要是用來管理一些工具包。

具體能夠參照 https://blog.csdn.net/momoda111/article/details/76590701 我是從這裏開始瞭解的。

 

其實這裏還牽扯到了commonjs, commonjs實際上是中代碼模塊化開發規範。方法require（「**.js」） module.export等就是他的特色。可是用commonjs規範寫的代碼瀏覽器不認，由於瀏覽器沒有require這類方法

因此又牽扯出一個 工具broserify，這個工具是把 按照commonjs規範寫的代碼，編碼一下，變成瀏覽器能夠識別的普通js代碼。

gulp的使用主要是依賴各類插件，如壓縮css的插件等，要用某個插件須要去下載並在gulpfile.js中引用。

 

如下是插件學習筆記：

 

免刷新瀏覽器實現實時更新頁面

不管修改了html，仍是css 或者js文件，無需刷新，只要一保存那麼頁面就更新。

1.首先須要插件 gulp-connect 的支持

var connect = require("gulp-connect");

2.啓動一個服務器（放到一個任務中）

gulp.task("server",function(){

　　connect.server({

　　root:"./app/"     //指定服務器的項目目錄 這樣服務器啓動後就能夠直接訪問到該目錄下的頁面

　　livereload:true    //是否支持實時刷新頁面

　　port:8888     //指定一個端口   能夠開啓多個服務器 只要指定不一樣的端口便可

　　});

});

3.指定須要自動刷新的文件（放到一個任務中）

如：gulp.task("html",function(){

　　gulp.src(「.app/css/*.css」).pipe(connect.reload());// 關鍵在於 connect.reload() 只要在流的最後加上這個就表示刷新頁面  即從新加載connect中的項目

});

4.監聽須要修改後觸發任務的文件

gulp.task("watch",function(){

　　gulp.watch(path.app + "**/*.html",['html']);

});

5.作一個一次性啓動整個任務的 入口任務。

gulp.task("default",["server","watch"]);

以上的流程解釋爲：監聽  path.app + "**/*.html" 若是其發生變化 則執行任務 ‘html’,而任務html中指定服務器從新載入。

至此 一個簡單的 實時更新頁面的工具就作好了。

源碼：

var gulp = require("gulp");
var connect = require("gulp-connect");
var path = {
    app:"./app/"
};
gulp.task("css",function(){
    gulp.src(path.app + "css/*.css").pipe(connect.reload());    
});
gulp.task("js",function(){
    gulp.src(path.app + "js/*.js").pipe(connect.reload());    
});
gulp.task("html",function(){
    gulp.src(path.app + "**/*.html").pipe(connect.reload());    
});
gulp.task("server",function(){
    
    //啓動服務器
    connect.server({
        root:path.app,
        livereload:true,
        port:8888
    });
    //使用默認瀏覽器打開路徑下的網頁 即打開 root指定的網頁
});
gulp.task("watch",function(){
    gulp.watch(path.app + "**/*.html",['html']);
    gulp.watch(path.app + "**/*.js",['js']);
    gulp.watch(path.app + "**/*.css",['css']);
});
gulp.task("default",["server","watch"]);

若是你想任務執行時自動啓動瀏覽器打開頁面 在任務server中使用 open("http://localhost:8888"); 這個open也是個插件須要引入。