前端構建工具整理

時間 2021-05-08

標籤 javascript css html 前端 java node webpack es6 web shell 欄目 JavaScript 简体版

原文原文鏈接

前文

端技術範圍不斷髮展，前端開發不只限於直接編寫html，css和javascript，Web應用日益龐大，代碼也更加龐大，所以許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（Es6 TypeScript）隨之出現，而構建工具則承擔起了中間的橋樑做用。javascript

正文

構建工具最直接的做用是：將源碼轉換成可執行的js,css和html，具體包括:css

代碼轉換:ts->js,scss->css
文件優化:壓縮js,css,html，壓縮合並圖片等
代碼分割：提取公共代碼。
模塊合併：將模塊化裏的多個模塊和文件合併到一個文件
自動刷新：監聽本地代碼，自動從新構建，刷新瀏覽器。（熱重載）
代碼校驗：代碼被提交到倉庫前須要校驗規範
自動發佈：更新代碼後，自動構建出線上發佈代碼，傳輸給發佈系統

構建實際上是工程化和自動化思想的再前端的體現：將一系列流程用代碼自動去實現，解放生產力。html

常見前端構建工具的分類和對比

1. Npm Script

npm是nodejs附帶的包管理器，npm script是npm內置的一個功能，容許在package.json文件裏面使用script字段定義任務：前端

{
    "scripts":{
        "dev":"node dev.js",
        "pub":"node build.js"
    }
}

在這裏，一個屬性對應一段shell腳本，原理是經過調用shell去運行腳本命令。java

優勢

內置，無需安裝其餘依賴

缺點

功能簡單，不方便管理多個任務依賴

2. Grunt

Grunt與npm script相似，也是經過shell運行腳本命令。
Grunt與大量封裝好的插件，能夠用於常見任務，也能管理任務之間的依賴。
grunt的具體執行代碼和依賴關係寫在配置文件的裏,例如：

module.exports = function(grunt){
    //插件的配置信息
    grunt.initConfig({
        uglify:{
            app_task:{
                files:{
                    'build/app.min.js':['lib/index.js','lib/test.js']
                }
            }
        }
    })
    ...
}

優勢

靈活，只執行咱們定義的任務
有大量現成的插件

缺點

集成度不高，須要些大量配置
至關於進階版npm script

3. Gulp

基於流的自動化構建工具。除了能夠管理和執行任務，還支持監聽讀寫文件。簡單例子：node

var gulp = require('gulp');     //引用基礎模塊
var uglify = require('gulp-uglify');    //js壓縮模塊

gulp.task('script',function(){  //啓動任務script
  gulp.src('js/*.js')           //找到文件
  .pipe(uglify())               //壓縮文件
  .pipe(gulp.dest('dist/js'))   //另存壓縮文件
});
//監聽
gulp.task('auto',function () {
  gulp.watch('js/*.js',['script']);     //監聽script任務
  gulp.watch('css/*.css',['css']);      //監聽css任務
  gulp.watch('images/*.*',['images']);  //監聽images任務
})；