前端自动化构建之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也有许多的方法能够灵活的调用