使用gulp构建前端自动化的方法示例


Posted in Javascript onDecember 25, 2018

gulp是一个自动化构建工具,开发者可以用它来自动执行一些常见的任务。这里以我之前做的一个demo为例,简要介绍如何使用gulp实现前端工程自动化。

项目结构

使用gulp构建前端自动化的方法示例

其中src目录下表示的是项目的源代码,可以看到其中有less、js、html等,而dist目录则是保存的是gulp编译后生成的代码,相当于生产环境。最后也最重要的是gulpfile.js,这个文件用于设置gulp相关的配置,类似于webpack中的webpack.config.js。

安装

这里使用的gulp为v3.9.1,语法和最新的v4.x有所出入,想学习最新的gulp语法,可以参考gulp.js - The streaming build system 。

3.9.1 安装如下:

npm install --save-dev gulp

语法

  • gulp.task()用于定义一个gulp任务,在命令行中可以使用gulp [任务名]开启该任务。
  • gulp.src()会返回符合匹配的文件流,可以被pipe()到其他插件中。
  • gulp.dest():输出所有数据。
  • gulp.watch()用于监测文件的变动。

实践

在这个项目中,有一些常见的需求,这里使用gulp来实现自动化:

  • less转css
  • css压缩合并
  • js压缩合并
  • 图片压缩

在gulpfile.js中首先需要导入gulp和一些常用的插件,本次demo使用到的插件如下:

var gulp = require('gulp'),
  less = require('gulp-less'),          //less 转 css
  csso = require('gulp-csso'),          //css压缩
  concat = require('gulp-concat'),        //合并文件
  uglify = require('gulp-uglify'),        //js 压缩
  jshint = require('gulp-jshint'),        //js 检查
  clean = require('gulp-clean'),         //清除文件
  imagemin = require('gulp-imagemin'),      //图片压缩
  rev = require('gulp-rev'),           //添加版本号
  revReplace = require('gulp-rev-replace'),   //版本号替换
  useref = require('gulp-useref'),        //解析html资源定位
  gulpif = require('gulp-if'),          //if语句
  connect = require('gulp-connect');       //创建web服务器

图片压缩

获取到src下所有以.jpg或.png结尾的图片,将其压缩后输出到dist目录下。

gulp.task('dist:img', () => {
  gulp.src(['./src/**/*.jpg', './src/**/*.png'])
  .pipe(imagemin())
  .pipe(gulp.dest('dist/'))
})

less压缩合并为css

先清除已存在的css,然后将src下以.less结尾的文件通过less()转为css文件,再通过csso()以及concat()实现对css的压缩合并。

gulp.task('dist:css', () => {
  gulp.src('dist/css/*.css').pipe(clean());
  return gulp.src('./src/less/*.less')
  .pipe(less())
  .pipe(csso())
  .pipe(concat('public.css'))
  .pipe(gulp.dest('dist/css/'));
});

js压缩合并

js压缩合并的过程大同小异,增加了一个jshint()代码审查的过程,它会将不符合规范的错误代码输出到控制台。

gulp.task('dist:js', () => {
  gulp.src('dist/js/*.js').pipe(clean());
  return gulp.src('./src/js/*.js')
  .pipe(jshint())
  .pipe(jshint.reporter('default'))
  .pipe(uglify())
  .pipe(concat('public.js'))
  .pipe(gulp.dest('dist/js/'))
});

less=>css

在开发过程中,因为html不能直接引入.less文件,因此还需要生成开发环境的.css。

gulp.task('src:css', () => {
  gulp.src('src/css/*.css').pipe(clean());
  return gulp.src('./src/less/*.less')
  .pipe(less())
  .pipe(gulp.dest('src/css/'));
});

添加版本号

为了防止浏览器对文件进行缓存,需要对文件添加版本号,保证每次获取到的都是最新的代码。

gulp.task('revision', ['dist:css', 'dist:js'], () => {
  return gulp.src(["dist/css/*.css", "dist/js/*.js"])
  .pipe(rev())
  .pipe(gulpif('*.css', gulp.dest('dist/css'), gulp.dest('dist/js')))
  .pipe(rev.manifest())
  .pipe(gulp.dest('dist'))
})

gulp.task('build', ['dist:img'], () => {
  var manifest = gulp.src('dist/rev-manifest.json');
  return gulp.src('src/index.html')
  .pipe(revReplace({
    manifest: manifest
  }))
  .pipe(useref())
  .pipe(gulp.dest('dist/'))
})

在revision中,首先通过rev()对dist目录下的.css/.js生成一个文件名带版本号的文件,例如本例中public.css生成public-5c001c53f6.css,然后分别输出到不同的目录下,最后生成一个rev-manifest.json文件,存储了原文件和带版本号文件之间的映射关系,如下:

{
 "public.css": "public-5c001c53f6.css",
 "public.js": "public-93c275a836.js"
}

在build中,先获取到rev-manifest.json中的对象,然后利用revReplace()来替换版本号,再使用useref()来进行资源的解析定位,最后输出即可。

以引入js文件为例,源html文件中对文件的引入则要改写为以下形式,即以注释的形式写入构建后生成的文件路径,如下:

<!-- build:js ./js/public.js -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/myAlbum.js"></script>
<!-- endbuild -->

最后生成的html为:

<script src="./js/public-93c275a836.js"></script>

具体的语法规则可以参见gulp-useref。

创建本地服务器并实现自动刷新

使用connet.server()来创建一个本地服务器,利用gulp.watch()来对src下的文件进行监测,如果发生变化,则执行编译less为css和刷新页面的任务。

gulp.task('connect', () => {
  connect.server({
    root: 'src',
    livereload: true,
    port: 8888
  })
})

gulp.task('reload', () => {
  gulp.src('src/*.html')
  .pipe(connect.reload())
})

gulp.task('watch', () => {
  gulp.watch('src/**/*', ['src:css', 'reload'])
})

完整的代码可以参见github。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
js实现漫天星星效果
Jan 19 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 #Javascript
详解vuex commit保存数据技巧
Dec 25 #Javascript
bootstrap table实现合并单元格效果
Dec 24 #Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 #Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 #Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 #Javascript
Vue.js组件高级特性实例详解
Dec 24 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
前台接待的工作职责
2013/11/21 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
网络管理专业求职信
2014/03/15 职场文书
关于环保的活动方案
2014/08/25 职场文书
社区活动总结
2015/02/04 职场文书
感恩教师节主题班会
2015/08/12 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python