關於前端自動化構建工具

一、簡介

　　　之前了解了自動化構建相關工具，然后今天有時間就把學習過程碰到的坑寫下來。首先是前端自動化構建三大工具gulp\grunt\webpack。其實說是三大工具，但也只是個人主觀想法。因為自己常見的並有所了解的就這三個。至於其他的，暫不在討論范圍。

二、gulp、grunt、webpack對比

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

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

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

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

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

  　　而webpack則進行了更徹底的打包處理，更加偏向對模塊語法規則進行轉換。主要任務是突破瀏覽器的鴻溝，將原本瀏覽器不能識別的規范和各種各樣的靜態文件進行分析，壓縮，合並，打包，最后生成瀏覽器支持的代碼，因此，webapck打包過后的代碼已經

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

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

 

三、工具選擇與自我實踐

　　1、查閱相關文檔之后，選擇gulp作為突破口。首先，gulp配置相對其他兩個而言稍顯簡單。

　　2、插件數量雖然不多，但是在不斷豐富並滿足基本需求。

四、安裝

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

　　2、全局安裝gulp之后最好再局部安裝（即項目所在目錄）;安裝目錄百度即可。

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

　　4、在根目錄下新建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並異步刷新的功能

六、需要注意的地方

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

　　2、使用插件之前先使用命令安裝插件，然后在gulpfile.js引入。之后再定義任務使用。

七、其他參考

　　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

九、后期完善的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"])