Gulp自动化编译初级使用

gulp

回顾：在没有使用webpack/gulp之前，前端在开发过程中，你应该遇到过代码修改后浏览器没有实时的进行对应刷新，相对应dom节点的未重新渲染，需要手动重新编译或者手动刷新等，这就让人很无奈，那有没有什么方法可以解决这个问题呢！！！of course当然有

场景：前端进行项目开发，重新编译实时刷新（这应该是开发人员都需要的。。。），接下来我们就说一说gulp是如何帮助你实现这般如此的效果的。

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。 ——- 官网

入门：

注意：进行安装gulp之前，要保证自己自己的环境已经安装过node，同时npm/yarn也要有的哦

话不多说，上来就是先安装（这里以 yarn 为安装包管理工具）

基操命令行：

yarn add gulp -g        //全局安装
yarn add gulp            //局部安装

安装完成后，通过 -v 命令进行检查是否安装成功；保证你的环境已经存在gulp，这个时候你就可以“肆意妄为”了。

ps： 
   mkdirp my-project
   cd my-project
   npm init
   npm install gulp

这个时候保证自己的gulp已经安装成功的奇前提下，在根目录下创建gulpfile.js文件，用来创建任务；使用gulp 执行文件
下面来来看一个简单的gulpfile.js例子：

function testTask() {

}
exports.default = testTask
//你也可以使用其他需要转移的语言来创建一个gulpfiles文件，比如：TypeScript/Bable
这里要注意安装对应的依赖（有兴趣的小伙伴可以去自己探索一哈）

显而易见，这个文件中任务没有进行实质性的操作，空的的gulp文件；export一个任务，就结束了。这个时候可能会有人问如何创建任务呢?

var gulp = require('gulp')  //首先必须是引入gulp模块

gulp.task("test", ()=>{
  //逻辑代码
})

这就创建了一个简单的任务了。

那如何实现使用gulp编译呢？？？
实现起来还是需要知道基本的一些API的：src、dest、series、watch、task、parallel
src : 创建一个流，用于读取文件
dest : 创建一个将文件元数据对象写入的流（打包后的文件）
series：将任务合成更大的操作（按顺序执行）
parallel ： 将任务合成更大的操作（同时执行）
watch ： 监听
task ： 创建任务

同时，你可能还需要知道一些常用的依赖：
gulp-concat ： 用于文件合并
gulp-uglify ： js文件压缩（可以使用其他的插件，效果相同）
gulp-rename ： 重命名
gulp-clean-css ： css文件压缩
gulp-htmlmin ： html文件压缩
gulp-livereload ： 热更新，不会自动刷新
gulp-connect’ ： 热更新，自动刷新

一个比较完整的demo:
创建html 文件，创建对应的css/js文件，这里就不多说了
test1.css test2.css
test1.js test2.js
index.html

var gulp = require('gulp')
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var rename = require('gulp-rename')
var cssClean = require('gulp-clean-css')
var htmlmin = require('gulp-htmlmin')
var livereLoad = require('gulp-livereload')
var connect = require('gulp-connect')
// 注册任务
// gulp.task("任务名", ()=>{

// })

// gulp.task('test',()=>{
//   console.log("3333")
// })

// 注册默认任务
// gulp.task("default",["任务名"])

gulp.task("js", ()=>{
  return gulp.src('src/js/*.js')
  .pipe(concat('bound.js'))
  .pipe(gulp.dest('dist/js/'))
  .pipe(uglify())
  // .pipe(rename('bound.min.js'))
  .pipe(rename({suffix:'.min'}))
  .pipe(gulp.dest('dist/js/'))
  .pipe(livereLoad())
  // .pipe(connect.reload())
})

gulp.task("css",()=>{
  return gulp.src('src/css/*.css')
  .pipe(concat('bound.css'))
  .pipe(cssClean())
  .pipe(rename('bound.min.css'))
  .pipe(gulp.dest('dist/css/'))
  .pipe(livereLoad())
  // .pipe(connect.reload())
})

gulp.task('html',()=>{
  return gulp.src('index.html')
  .pipe(htmlmin({collapseWhitespace:true}))
  .pipe(gulp.dest('dist/'))
  .pipe(livereLoad())
  // .pipe(connect.reload())
})

// 监听（半自动）
gulp.task('watch', ()=>{
  // 开启监听
  livereLoad.listen()
  // 监听对应任务 实现实时刷新
  gulp.watch('src/js/*.js',gulp.parallel(['js']))
  gulp.watch('src/css/*.css',gulp.parallel(['css']))
  gulp.watch('index.html',gulp.parallel(['html']))
})

// 监听全自动
gulp.task('serve', (cb) => {
  connect.server({
    root:'dist/',
    livereLoad:true,
    port:5001
  })
  gulp.watch('src/js/*.js',gulp.series(['js']))
  gulp.watch('src/css/*.css',gulp.series(['css']))
  gulp.watch('index.html',gulp.series(['html']))
  cb()
})

gulp.task('default',gulp.series(['serve','js','css','html']))