使用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 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jQuery事件对象总结
Oct 17 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
Axios取消重复请求的方法实例详解
Jun 15 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
分享一个超好用的php header下载函数
2014/01/31 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python 文件操作的详解及实例
2017/09/18 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
公司离职证明标准样本
2014/10/05 职场文书
PHP新手指南
2021/04/01 PHP
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server