• 欢迎大家分享资料!前往留言板评论即可!

Gulp自动化编译初级使用

合宙 模组资料网 5个月前 (05-15) 64次浏览 已收录 0个评论 扫描二维码

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']))

转载请注明原文链接:Gulp自动化编译初级使用
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址