前端---基於gulp的打包與熱更新

前言

      前幾天公司須要重構一個古老版本的項目，其實也不古老，去年6月份開發的一個桌面應用項目，主要是爲了作兼容硬件設備，並非在平時用的瀏覽器（相似於汽車裏面的導航屏幕類的設備）。曾使用過Vue寫過一個版本，可是硬件不支持Vue，因此使用了JQuery1跟Bootstrap以及Gulp來進行熱更新跟打包。

應用場景

       gulp是一種基於node流的一款簡單且快速的構建工具，上次跟同事聊前端的快速迭代，他說前端是爲了更新而更新（作了一些沒有必要的更新）。其實一些老的方法對於某些項目也是比較方便的，雖然如今主要流行的webpack，當處理簡單的html，css，js等先後端不分離的項目，我我的以爲gulp仍是不錯的。

gulp的安裝

全局安裝，在項目裏面在進行一次安裝3.9.0（4.0.0會報錯，好像指令變了）

npm i -g gulp
npm init
npm i -D gulp@3.9.0複製代碼

gulp的使用

假如我們的項目結構是這樣的，新建一個gulpfile.js 的文件，做爲項目構建的入口

   目標結構是這樣的

1. 將css文件下的全部css文件打包成index.min.css
2. 將less文件下的全部less文件打包成main.min.css
3. 將extend文件下的全部第三方引入的css更換路勁
4. 將js文件下的全部js文件打包成main.min.js

那麼如何使用gulp作呢？

   這是pageage.json 下載的gulp插件（有不少插件，我只是舉個荔枝）

"devDependencies": {   
     "gulp": "^3.9.0",
     "gulp-concat": "^2.6.1",   
     "gulp-connect": "^5.7.0",
     "gulp-htmlmin": "^5.0.1",  
     "gulp-imagemin": "^5.0.3",  
     "gulp-less": "^4.0.1",  
     "gulp-minify-css": "^1.2.4", 
     "gulp-uglify": "^3.0.2" 
 }複製代碼

在gulpfile裏面咱們去引用他們

var gulp =require("gulp");
    var connect = require('gulp-connect');// 啓動服務
    var concat=require('gulp-concat');   //合併文件
    var less = require('gulp-less');     // 轉less
    var jsuglify = require('gulp-uglify');// 壓縮js
    var cssminify = require('gulp-minify-css');//壓縮css
    var imageMin = require('gulp-imagemin'); // 壓縮img
    var htmlmin = require('gulp-htmlmin');//壓縮html複製代碼

開始構建

    gulp 的官方api

gulp.task("任務名稱",function(){          })
    gulp.src('路勁') // 可讀流
    .pipe(gulp.dest('目標路勁') ) //管子  --->  可寫流
複製代碼

•  先啓動一個端口，以便進行熱更新預覽

//   服務，端口    
gulp.task("server",function(){
        connect.server({ 
           root:"dist",// 路徑 
           livereload:true,
            port:8080 
       })  
  })複製代碼

• 熱更新 監聽src下面任何文件的改動

//  熱更新
gulp.task("reload",function(){
   gulp.src("./src/**/*.*") 
   .pipe(connect.reload());
})複製代碼

• dev 模式 跟build模式
• 監聽src文件改動執行build任務更新dist 文件，在執行reload重置瀏覽器進行熱更新

gulp.task("watch",function(){ 
   gulp.watch("./src/**/*.*", ["build","reload"]);//監聽src下全部文件
})
gulp.task("dev",["server",'watch'],function(){ // function能夠不傳 
   console.log("dev")
}) 複製代碼

• 打包生成dist文件

gulp.task("build",['html','css','extendcss','less','js','image'])
 // 依次執行後面 [] 的任務進行打包複製代碼

在這個build的任務中，咱們執行了'html','css','extendcss','less','js','image'等任務

創建任務

//   css
gulp.task("css",function(){
    gulp.src("./src/css/*.css")  //  任意css文件
    .pipe(concat('main.min.css')) // 合併文件成  main.min.css 
    .pipe(cssminify())   // 壓縮css    
    .pipe(gulp.dest('dist/css'))   //輸出到dist/css文件夾下})
//   extendcss  依賴的第三方css 不作處理 只改變路勁
gulp.task("extendcss",function(){
    gulp.src("./src/extend/*.css")
    .pipe(gulp.dest('dist/css'))
   })
//   less
gulp.task("less",function(){
    gulp.src("./src/less/*.less")
    .pipe(less())  // 轉less
    .pipe(concat('index.min.css'))
    .pipe(cssminify())
    .pipe(gulp.dest('dist/css'))
   })
// js
gulp.task('js', function() {  
  
gulp.src('./src/js/*.js')     // 1. 找到文件    
      .pipe(jsuglify({ mangle: false }))   // 2. 壓縮文件       .pipe(concat('main.min.js')) // 3. 另存壓縮後的文件 
      .pipe(gulp.dest('dist/js'))})
// image
gulp.task('image',function(){
    gulp.src('src/img/*.*')
        .pipe(imageMin({
            optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級） 
            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片    
            interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染  
            multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化  
      }))      
  .pipe(gulp.dest('dist/img'))})
//  html
gulp.task("html",function(){
     var options = {
        removeComments: true,//清除HTML註釋 
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: false,//省略布爾屬性的值 <input checked="true"/> ==> <input />    
        removeEmptyAttributes: false,//刪除全部空格做屬性值 <input id="" /> ==> <input /> 
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"  
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css" 
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS    }; 
      gulp.src("./src/*.html")
     .pipe(htmlmin(options)) 
     .pipe(gulp.dest('dist'))
  })複製代碼

運行

 咱們執行

gulp dev 複製代碼

       就能夠在瀏覽器上輸了localhost:8080 預覽項目了，而且但咱們src下的文件改動以後無需刷新頁面自動更新。

淡然以爲gulp命令看的不爽的話能夠修改json的指令

npm run build npm run dev 就好了

"scripts": {   
    "dev": "gulp dev", 
    "build": "gulp build",
    "test": "echo \"Error: no test specified\" && exit 1" 
 },複製代碼

寫在後面

      其實像這種相似的結構的項目就很簡單，開發週期短，不須要webpack那種牛逼的構建工具，每一個項目都有適合本身的那一套，就像如今的前端項目，不管你怎麼皮，我就是vue，react一把梭，啊哈哈哈，vue也好，jq也罷，適合項目的纔是最好的，老話說的好，不試試你怎麼知道合不合適？（淡然，公司是不會給你時間去試試的）

       啊哈哈，第一次寫，溜了溜了。