Gulp在前端的常用操作实例

以前在做代码优化的时候，一般都用一些网上的在线工具来完成，写LESS的时候，一般用Koala来编译，感觉用起来也挺不错的。但是现在构建工具的出现，让以前做的那些繁琐操作变的更方便一些了，我在这里也用构建工具来完成一下我以前一些前端的工作。这里我选用了Gulp来使用。

实例概要

  • 代码压缩
  • CSS自动加前缀
  • LESS编译
  • 地址版本追加
  • 文件合并
  • 文件修改自动刷新页面

Gulp一些入门知识

这里还是说一下Gulp的一些入门的必备知识，方便看后文的理解。

Gulp是一款自动构建工具，需要在Node.js的环境下运行，常用的API方法并不多，很快就能熟记，用到的大部分功能都是依靠插件来完成的。

Gulp的插件需要用npm来进行安装：

npm install <name> [-g] [--save-dev]
  • -g全局安装，通常只在项目下安装即可，所以不用加这个参数
  • --save-dev用于将依赖包保存到项目下的package.json文件中，-dev用来区分开发模式和生产模式下用到的模块。指定则保存到package.json的devDependencies节点，不指定-dev将保存至dependencies节点。

使用Gulp需要先在项目下安装Gulp模块。

初始化项目环境

npm init

进入项目，安装gulp

npm install gulp --save-dev

创建gulp配置文件gulpfile.js

Gulp 官网

实例一：编译LESS

用到插件：gulp-less

安装命令：install gulp-less --save-dev

Github: https: //github.com/plus3network/gulp-less

gulpfile.js代码：

//引入必要文件
var gulp = require('gulp'),less = require('gulp-less');//创建任务
gulp.task('testLess', function(){gulp.src('src/less/*.less') //所有src/less下的less文件.pipe(less()) //执行less编译.pipe(gulp.dest('src/css')) //将编译后的文件写到目的目录下
});

现在在src/less下创建less文件，并编码，然后在CLI下执行：

gulp testLess

即可在src/css下看到已经编译完成的css文件。

实例二：在LESS中加入自动前缀

方法一：gulp-autoprefixer

安装命令：install gulp-autoprefixer --save-dev

Github: https: //github.com/sindresorhus/gulp-autoprefixer

gulpfile.js代码：

var gulp = require('gulp'),less = require('gulp-less'),autoprefixer = require('gulp-autoprefixer');gulp.task('testLess', function(){gulp.src('src/less/*.less').pipe(less()).pipe(autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0']})) //自动加入前缀.pipe(gulp.dest('src/css'))
});

在CLI下执行：

gulp testLess

编译的文件中已经自动加入了前缀，这对编写CSS能够提高很大的效率。

方法二：less-plugin-autoprefix

这里用的是less的插件。

安装命令：install less-plugin-autoprefix --save-dev

Github: https: //github.com/less/less-plugin-autoprefix

gulpfile.js代码：

var gulp = require('gulp'),less = require('gulp-less'),LessAutoprefix = require('less-plugin-autoprefix');gulp.task('testLess', function(){gulp.src('src/less/*.less').pipe(less({plugins: [new LessAutoprefix({ browsers: ['last 2 versions'] })]})).pipe(gulp.dest('src/css'))
});

自动前缀需要自行设置一些编译参数，详细了解可以看官方GitHub，两种方法的配置基本一样。

这个插件可单独应用到为css加前缀。

实例三：在LESS中加入代码压缩

安装命令：install gulp-minify-css --save-dev

Github: https: //github.com/less/less-plugin-autoprefix

这个插件实际上是用的clean-csshttps: //github.com/jakubpawlowicz/clean-css。

gulpfile.js代码：

var gulp = require('gulp'),less = require('gulp-less'),autoprefixer = require('gulp-autoprefixer'),minifycss = require('gulp-minify-css');gulp.task('testLess', [], function(){gulp.src('src/less/*.less').pipe(less()).pipe(autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0']})).pipe(gulp.dest('src/css')).pipe(minifycss()); //压缩
});

实例四：为链接文件追加版本号

安装命令：install gulp-rev-append --save-dev

Github: https: //github.com/bustardcelly/gulp-rev-append

为在网页中链接的资源文件路径追加版本号，可以用于防止缓存文件。

版本号是依据文件内容进行MD5后的结果，所以只为文件内容变动，版本号就变动。

工作方式：(?:href|src)="(.*)[\?]rev=(.*)[\"]

var gulp = require('gulp'), rev = require('gulp-rev-append');gulp.task('testRev', function(){gulp.src('src/index.html').pipe(rev()).pipe(gulp.dest('src/rev'));
});

要执行这个功能，需要在链接资源地址后加入?rev=@@hash

<!-- inde.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/index.css?rev=@@hash"></script>
</head>
<body><img src="a.jpg?rev=@@hash">
</body>
</html>
<!-- 编译后的文件 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/index.css?rev=2e151da214ef1a3563abdc2cb8c23d7f">
</head>
<body><img src="a.jpg?rev=d41d8cd98f00b204e9800998ecf8427e">
</body>
</html>

需要注意的是，如果链接的资源并不存在，那么是无法追加版本号的。

实例五：文件合并

安装命令：install gulp-concat --save-dev

Github: https: //github.com/wearefractal/gulp-concat

为了生产模式下，为了减少网络请求，通常将同类文件进行合并，例如合并JS、CSS。

合并JS：

var gulp = require('gulp'),concat = require('gulp-concat');gulp.task('concatJs', function(){//gulp.src('src/js/*.js')//这种方式合并文件的先后顺序不能控制gulp.src(['src/js/js1.js','src/js/js2.js']) //按顺序将文件写入数组，做为参数.pipe(concat('all.js')) //合并后生成的文件.pipe(gulp.dest('src/css'))
});

合并CSS：

var gulp = require('gulp'),concat = require('gulp-concat');gulp.task('concatCss', function(){//gulp.src('src/css/*.css')gulp.src(['src/css/css1.css','src/css/css2.css']).pipe(concat('all.css')) .pipe(gulp.dest('src/css'))
});

实例六：文件改变 自动刷新浏览器

安装命令：install gulp-connect --save-dev

Github: https: //github.com/AveVlad/gulp-connect/

当我们在做页面编码时，为了实时查看代码效果，需要不断的刷新浏览器，十分繁琐。那有没有什么工具可以监控文件，只要文件发生变化就及时自动刷新浏览器的？ 当然有了，这下我们就可以释放F5了。


var gulp = require('gulp'),connect = require('gulp-connect');//创建服务任务
gulp.task('connect', function(){connect.server({//这里有配置端口和主机的选项，我这里就按默认的来了livereload: true //即时刷新});
});gulp.task('css', function(){gulp.src('src/css/*.css').pipe(connect.reload()); //重新加载
});//css文件监测
gulp.task('fileWatch', function(){gulp.watch('src/**/*.css', ['css']);
});//默认任务启动
gulp.task('default', [ 'connect','fileWatch']); //先打开连接，再监测文件

这里直接运行gulp即可，因为没有配置端口，所以根据CLI中的提示，在浏览器中打开地址即可。此命令不直接打开浏览器。

当在修改CSS文件并保存后，浏览器就会自动刷新了。

LiveReload是一个WebSockets协议：

结语

好了，在Gulp中常用的前端操作基本都写了，大家可以根据自己的需求去定制。想进行更详细的配置，可以参考每个插件中的GitHub地址。

博客名称：王乐平 技术博客

CSDN博客地址：http://blog.csdn.net/lecepin

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/401678.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深入了解CSS字体度量，行高和vertical-align

深入了解CSS字体度量，行高和vertical-align

本文英文出处:http: //iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 著作权归作者所有。 转载自https: //www.w3cplus.com/css/css-font-metrics-line-height-and-vertical-align.html line-height和vertical-align在CSS中是两个简单的属性。如此简单&…
阅读更多...
HTML5 Canvas制作雷达图实战

HTML5 Canvas制作雷达图实战

雷达图又叫蜘蛛网图&#xff0c;是一种对各项数据查看很明显的表现图&#xff0c;在很多游戏中&#xff0c;对游戏中的每个角色的分析图一般也用这种图。 下面&#xff0c;用HTML5的Cavas来实现雷达图。 效果 一、创建Canvas var mW 400; var mH 400; var mCtx null;var c…
阅读更多...
AlphaBlend

AlphaBlend

AlphaBlend实现透明效果&#xff0c;只是仅仅能针对某块区域进行alpha操作&#xff0c;透明度可设。 TransparentBlt能够针对某种颜色进行透明&#xff0c;只是透明度不可设。 AlphaBlend&#xff1a; BLENDFUNCTION bn; bn.AlphaFormat 0; bn.BlendFlags 0; bn.BlendOp AC_…
阅读更多...
ECMAScript 6网页样式修正器

ECMAScript 6网页样式修正器

最近在看ES6这一方面的图书&#xff0c;在搜索的过程中发现了《ECMAScript 6 入门-阮一峰》&#xff0c;感觉还不错。因为我个从比较喜欢看纸质的书&#xff0c;就想把这本书给打印下来。 但是网页版的《ECMAScript 6 入门-阮一峰》设置的样式只适合在网页上查看&#xff0c;并…
阅读更多...
PWA(Progressive Web App)入门系列：（一）PWA简介

PWA(Progressive Web App)入门系列：（一）PWA简介

前言 PWA做为一门Google推出的WEB端的新技术&#xff0c;好处不言而喻&#xff0c;但目前对于相关方面的知识不是很丰富&#xff0c;这里我推出一下这方面的入门教程系列&#xff0c;提供PWA方面学习。 什么是PWA PWA全称Progressive Web App&#xff0c;直译是渐进式WEB应用…
阅读更多...
Vue DevTools可使用修正方法

Vue DevTools可使用修正方法

因为工作要求&#xff0c;目前主要在用Vue.js技术栈做开发&#xff0c;调试是必不可少的&#xff0c;这里会用的Vue DevTools的调试工具&#xff0c;问题就出在这里&#xff0c;当用Vue DevTools做调试时&#xff0c;很多时候都不能用&#xff0c;提示没有监测到Vue&#xff0c…
阅读更多...
ZRender实现粒子网格动画实战

ZRender实现粒子网格动画实战

注&#xff1a;本博文代码基于ZRender 3.4.3版本开发&#xff0c;对应版本库地址&#xff1a;ZRender 库。 效果 实现分析 通过上面显示的效果图&#xff0c;可以看出&#xff0c;这种效果就是在Canvas中生成多个可移动的点&#xff0c;然后根据点之间的距离来确定是否连线&am…
阅读更多...
CSS动画实战：创建一个太极Loading图

CSS动画实战：创建一个太极Loading图

这里主要是使用CSS的animation和伪类来构建&#xff0c;分析设定关键帧的执行顺序和时间段。 效果 动画分析 首先通过效果对动画执行进行一下分析&#xff1a; 边框的四条边进行按顺序动画加载 。矩形边框变为圆行边框。太极图内部图案渐渐出现。太极图旋转。整个动画逆序执…
阅读更多...
PWA(Progressive Web App)入门系列：（二）相关准备

PWA(Progressive Web App)入门系列：（二）相关准备

前言 在上一章中&#xff0c;对PWA的相关概念做了基本介绍&#xff0c;了解了PWA的组成及优势。为了能够更快的进入PWA的世界&#xff0c;这一章主要对在PWA开发中&#xff0c;需要注意的问题&#xff0c;运行的环境及调试工具做介绍说明。 浏览器要求 因为目前各浏览器对于…
阅读更多...
PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

前言 前面说过&#xff0c;让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术&#xff0c;本章会详细说明manifest的实现&#xff0c;及各个参数的具体含义&#xff0c;还将了解如何定义Web App的启动图标、启动样式等。 简介 manifest是一种简单的…
阅读更多...
利用百度LBS做一个小Demo

利用百度LBS做一个小Demo

为什么80%的码农都做不了架构师&#xff1f;>>> 申请ak&#xff08;即获取密钥&#xff09;http://lbsyun.baidu.com/apiconsole/key?applicationkey 去这儿注册一个开发者账号即可拼写发送http请求的url譬如这样的调用http://api.map.baidu.com/geocoder/v2/?ad…
阅读更多...
PWA(Progressive Web App)入门系列：（四）Promise

PWA(Progressive Web App)入门系列：（四）Promise

前言 这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢&#xff1f;因为PWA中的许多技术API中都是以Promise返回的方式返回的&#xff0c;为了对后续章节中PWA技术API更好的理解&#xff0c;这里就来说一个Promise对象。 Promise出现的背景 在JavaScrip…
阅读更多...
图文详解如何搭建Windows的Android C++开发环境

图文详解如何搭建Windows的Android C++开发环境

原地址:http://www.apkbus.com/android-18595-1-1.html ////TITLE:// 图文详解如何搭建Windows的Android C开发环境&#xff08;一&#xff09;//AUTHOR:// norains//DATE:// Thursday 14-April-2011//Environment:// Cygwin 1.7.9// Android NDK r5//1. 下载A…
阅读更多...
PWA(Progressive Web App)入门系列：（五）Web Worker

PWA(Progressive Web App)入门系列：（五）Web Worker

前言 在说Service Worker前有必要说一下Web Worker&#xff0c;因为Service Worker本身就属于Web Worker的延伸&#xff0c;大部分功能也是基于Web Worker进行的扩展。 背景 众所周知&#xff0c;JavaScript引擎是以单线程调度的方式进行&#xff0c;我们无法同时运行多个Ja…
阅读更多...
Glob Patterns匹配模式使用

Glob Patterns匹配模式使用

前段时间在用workbox时&#xff0c;在做precache时&#xff0c;匹配模式基于的是Glob Pattern模式&#xff0c;于是就看了下相关文档。 下面翻译一下node-glob的使用&#xff0c;原文&#xff1a;https://github.com/isaacs/node-glob#glob-primer Glob 像在shell里面&#x…
阅读更多...
Workbox CLI v3.x 中文版

Workbox CLI v3.x 中文版

在写PWA应用时&#xff0c;用到WorkBox工具&#xff0c;使用过程中发现没有中文的帮助文档&#xff0c;为了体验好一些&#xff0c;也为了方便自己和他人查看&#xff0c;在这里翻译了一下workbox-cli。 Workbox CLI 是什么? Workbox命令行&#xff08;在workbox-cli包内&…
阅读更多...
Workbox.routing v3.x 中文版

Workbox.routing v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 类 NavigationRoute NavigationRoute可以轻松创建匹配浏览器navigation requests的Route。 它仅匹配mode设置为navigate的请求。 您可以只使用blacklist和whitelist参数中的一个或两个&#xff0c;将此路由应用于导航请求中。 RegExpRout…
阅读更多...
Workbox.strategies v3.x 中文版

Workbox.strategies v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 该模块提供了大多数serviceworker常用的缓存策略的简单实现。 类 CacheFirst cache-first请求策略的实现。 缓存优先策略对于带版本号的资源是非常有用的&#xff0c;像这种URLstyles/example.a8f5f1.css&#xff0c;因为它们可以长时间缓存…
阅读更多...
集算器访问HTTP数据的代码示例

集算器访问HTTP数据的代码示例

使用集算器&#xff08;esProc&#xff09;可以很方便的从http数据源读取数据进行处理。本例子中有一个servlet&#xff0c;对外提供json格式的雇员信息查询。Servlet访问数据库的员工表&#xff0c;保存了员工的信息&#xff0c;如下&#xff1a;EID NAME SURNAME …
阅读更多...
PWA(Progressive Web App)入门系列：Cache Storage Cache

PWA(Progressive Web App)入门系列：Cache Storage Cache

前言 目前浏览器的存储机制有很多&#xff0c;如&#xff1a;indexedDB、localStorage、sessionStorage、File System API、applicationCache 等等&#xff0c;那为什么又制定了一套 Cache API 呢&#xff1f;对比其他存储机制有什么优势&#xff1f; 简介 Cache API 是一套…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023