前端自動化構建之gulp

 前言

以前學完html的基礎後就去學js框架了，每次都是用腳手架搭好的文件，在無形中體驗了一波前端自動化帶來的方便。而後前一段時間纔開始學習前端自動化。

基本介紹

gulp說得簡單一點就是一個自動化把前端的各類工具以流的方式一步一步的按照設置的規定加載的一個管理工具

裝載

首先全局安裝gulp

npm install --global gulp

而後你須要在根目錄下建立一個名爲gulpfile.js的文件
這個文件是gulp命令須要加載的文件，經過這個文件來處理預設的構建

使用

首先你能夠在你的項目裏面建立一些html和js文件，而後你的文件能夠經過browserify來處理js的模塊的文件，若是你每次修改js文件你須要每次都要在命令行裏面運行browserify的處理。

gulp來自動化browserify

若是經過gulp來自動化構建的話，你能夠在配置文件gulpfile.js裏面添加一個task（任務）

gulp.task('mainjs', ()=>{
  console.log('處理渲染')
  browserify().add('./assets/js/index.js').bundle().pipe(fs.createWriteStream('./js/main.js'))
})

在此以前你須要引入gulp和browerifi同時引入fs來找到文件

做用是使用browerify來把index.js打包成main.js在html頁面只須要加載main.js就好
而後你每次都只要運行gulp就能夠了。

gulp來自動監聽代碼的變更

 你須要經過gulp自帶的watch方法
新建一個task來調用watch，而後你須要在監聽到後從新渲染mainjs這個任務，
能夠經過runSequence來在一個task中調用另外一個task

 

gulp.task('watch', () => {
  gulp.watch(['./assets/js/*.js'], ()=>{
  //監聽到後就從新渲染
    runSequence('mainjs')
  })
})

監聽到了assets中的js中的全部的js的變更就會調用後面的箭頭函數

結語

這裏只是初步的嘗試了一下gulp的做用，gulp是經過流同樣的任務的模式來處理你以前定義的加載方式 同時你還能夠處理css和構建第三方庫 gulp也有許多的方法能夠靈活的調用