使用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控制代码暂停的实现方法分享
Oct 11 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
js打开新窗口方法整理
Feb 17 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
javascript实现超好看的3D烟花特效
Jan 01 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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日期控制类实例
2014/12/09 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
js倒计时显示实例
2016/12/11 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
深入解析Python中的WSGI接口
2015/05/11 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
用pycharm开发django项目示例代码
2018/10/24 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
老师自我鉴定范文
2013/12/25 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
政协委员个人总结
2015/03/03 职场文书
学籍证明模板
2015/06/18 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
python如何在word中存储本地图片
2021/04/07 Python
Python装饰器的练习题
2021/11/23 Python