使用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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
JavaScript模拟push
Mar 06 Javascript
vue-hook-form使用详解
Apr 07 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 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中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
redux.js详解及基本使用
2019/05/24 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
python实现目录树生成示例
2014/03/28 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
学校国庆节活动总结
2015/03/23 职场文书
子女赡养老人协议书
2016/03/23 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android