使用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中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
php递归函数怎么用才有效
2018/02/24 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
护理专业毕业生自我鉴定
2013/10/08 职场文书
中医专业应届生求职信
2013/11/17 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
实习指导教师评语
2014/12/30 职场文书
毕业生评语大全
2015/01/04 职场文书
美术教师个人工作总结
2015/02/06 职场文书
材料采购员岗位职责
2015/04/03 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
springboot读取resources下文件的方式详解
2022/06/21 Java/Android
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技