關於前端自動化構建工具

1、簡介

　　　以前瞭解了自動化構建相關工具，而後今天有時間就把學習過程碰到的坑寫下來。首先是前端自動化構建三大工具gulp\grunt\webpack。其實說是三大工具，但也只是我的主觀想法。由於本身常見的並有所瞭解的就這三個。至於其餘的，暫不在討論範圍。

2、gulp、grunt、webpack對比

　　一、Grunt和Gulp屬於任務流工具Tast Runner , 而 webpack屬於模塊打包工具 Bundler。

　　二、Grunt的出現早於Gulp，Gulp是後起之秀。他們的本質都是經過 JavaScript 語法實現了shell script 命令的一些功能。好比利用jshint插件 實現 JavaScript 代碼格式檢查這一個功能。早期須要手動在命令行中輸入 jshint test.js，而 Grunt 則經過文件 Gruntfile.js 進行配置

　　三、 Gulp吸收了Grunt的優勢，擁有更簡便的寫法，經過流（Stream）的概念來簡化多任務之間的配置和輸出，讓任務更加簡潔和容易上手。經過配置gulpfile.js文件來實現。

　　四、webpack是後起之秀，它支持了AMD 和 CommonJS 類型，經過loader 機制也可使用ES6模塊格式。還有強大的 code splitting。webpack 是個十分強大的工具，它正在想一個全能型的構建工具發展。

　　五、gulp和grunt是流管理工具，經過一個個task配置執行用戶須要的功能，如格式檢驗，代碼壓縮等，值得一提的是，通過這二者處理的代碼只是局部變量名被替換簡化，總體並無發生改變，仍是你的代碼。

  　　而webpack則進行了更完全的打包處理，更加偏向對模塊語法規則進行轉換。主要任務是突破瀏覽器的鴻溝，將本來瀏覽器不能識別的規範和各類各樣的靜態文件進行分析，壓縮，合併，打包，最後生成瀏覽器支持的代碼，所以，webapck打包事後的代碼已經

　　　 不是你寫的代碼了，或許你再去看，已經看不懂啦

做者：果汁涼茶丶
連接：https://www.jianshu.com/p/fe96491ccf56
來源：簡書

 

3、工具選擇與自我實踐

　　一、查閱相關文檔以後，選擇gulp做爲突破口。首先，gulp配置相對其餘兩個而言稍顯簡單。

　　二、插件數量雖然很少，可是在不斷豐富並知足基本需求。

4、安裝

　　一、首先下載安裝node.js，安裝步驟再也不贅述，百度便可。

　　二、全局安裝gulp以後最好再局部安裝（即項目所在目錄）;安裝目錄百度便可。

　　三、在根目錄下運行npm init 生成package.json文件

　　四、在根目錄下新建gulpflie.js

　　五、引入插件，註冊插件，使用插件

5、一些零散的筆記

var gulp = require("gulp");
var browserSync = require("browser-sync");
var sass = require("gulp-sass");
gulp.task("browserSync",function(){
    browserSync.init({
        server:"app"
    })
    //
})
gulp.task("sass",function(){
    return gulp.src("app/scss/style.scss")
    .pipe(sass())
    .pipe(gulp.dest("app/css"))
})
gulp.task("watch",function(){
    gulp.watch("app/**/*.scss",["browserSync","sass"])
    gulp.watch("app/**/*.scss").on("change",browserSync.reload);
})

以上是利用sass插件和browser-sync插件製做的編譯sass並異步刷新的功能

6、須要注意的地方

　　一、nodejs會自動安裝gulp最新版本，可是4.0在語法與3.9一下版本有些不一樣。  安裝自定義版本gulp命令：npm install gulp@3.9

　　二、使用插件以前先使用命令安裝插件，而後在gulpfile.js引入。以後再定義任務使用。

7、其餘參考

　　https://www.cnblogs.com/Tom-yi/p/8036730.html

八、使用browser-sync作pc移動端調試的時候，按照步驟走到打開localhost:3001的設置頁面時，不知道爲何沒有找到相對應的開關

　　https://segmentfault.com/q/1010000013649934

　　https://blog.csdn.net/u013063153/article/details/52787421

9、後期完善的gulpfile

//經過browser-sync插件，並經過自帶watch插件監聽sass編譯實現熱更新
// var browserSync = require("browser-sync");
// gulp.task("browserSync",function(){
//     browserSync.init({
//         server:"app"
//     })
// })
// gulp.task("watch",function(){
//     gulp.watch("app/**/*.scss",["browserSync","sass"])
//     gulp.watch("app/**/*.scss").on("change",browserSync.reload);
// })

//引入html並刷新
// gulp.task("html",function(){
//     gulp.src("app/*.html");
//         .pipe(webServer.reload())
// })

// --------------------------------------------------------------------分割線----------------------------------------------------------------------
//引入
var gulp = require("gulp");
var sass = require("gulp-sass");
var tinypng_nokey = require('gulp-tinypng-nokey');
var webServer = require('gulp-connect');
var rename = require("gulp-rename");
var plumber = require("gulp-plumber");
//var watch = require('gulp-watch');
//定義任務 控制檯執行例如：gulp sass

//編譯css、壓縮等操做
gulp.task("sass",function(){
    //引入源文件
    return gulp.src("app/**/*.scss")
    //執行sass編譯
    .pipe(sass())
    //修改文件路徑
    .pipe(rename({
        dirname:""
    }))
    //執行輸出
    .pipe(gulp.dest("app/css1"))
    .pipe(webServer.reload())
})

//醜化、壓縮js等操做，但我這裏由於沒處理因此只是簡單的複製
gulp.task("js",function(){
    //引入源文件
    return gulp.src("app/**/*.js")
    //修改文件路徑
    .pipe(rename({
        dirname:"",
        basename:"main"
    }))
    //執行輸出
    .pipe(gulp.dest("app/js1"))
    .pipe(webServer.reload())
})
function handler (err){
    console.log('Less Error!', err.message);
    this.emit('end');
}
//壓縮html等操做但我這裏由於是測試，因此只是簡單的複製沒有作處理
gulp.task("html",function(){
    return gulp.src("app/**/*.html")
    .pipe(gulp.dest("app"))
    .on("error",handler)
    .pipe(webServer.reload())
})
//監聽
gulp.task("watch",function(){
    gulp.watch("app/**/*.scss",["sass"])
    gulp.watch("app/**/*.js",["js"])
    gulp.watch("app/**/*.html",["html"])
})
gulp.task("connect",function(){
    webServer.server({
        root:"./app",
        port: 80,
        host: 'jiangqi.dev',
        livereload: true,
    });
})
gulp.task("default",["sass","connect","watch"])