初识gulp
之前一段时间学习使用了gulp自动化构建工具,并在现在使用的项目上部署使用,同时在这做个笔记进行小结,以便加深记忆,如有理解错误的地方请不吝赐教
gulp 的解释我就不多说了 这里引用官网的一句话 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务,提高开发效率
在这我多使用gulp进行JS压缩,css压缩,同时其还能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤,下面我就不多说了直接上手如何使用gulp
1.首先当然是要安装一个node,gulp是具于node的所以这是最基础的一步
你可以去node官网下载一个版本node安装,链接http://nodejs.cn/(这里我使用的node均在window系统下);
2.使用命令行进行gulp安装下载,
1).这里就稍微记录下node下常用的一点命令行
node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。
npm -v查看npm的版本号,npm nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)。
cd定位到目录,用法:cd + 路径 ;
dir列出文件列表;
cls清空命令提示符窗口内容。
2)安装gulp
2.1.首先全局安装gulp,目的通过其执行gulp任务,安装命令为:(npm install gulp -g),查看是否安装成功(gulp -v)出现版本号即为成功;
2.2.新建一个package.json文件,当然你也可以使用(npm init)来创建一个package.json文件。
下面以手动创建为例
{
"name": "test", //项目名称(必须)
"version": "1.0.0", //项目版本(必须)
"description": "This is for study gulp project !", //项目描述(必须)
"homepage": "", //项目主页
"repository": { //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //项目作者信息
"name": "xxx",
"email": "xxx@qq.com"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}
2.3.在使用的目录下安装gulp(npm install --save-dev gulp),
2.4.在项目的根目录新建一个gulpfile.js文件
var gulp = require('gulp');
gulp.task('gulps', () => {
return //需要执行的代码
}); 然后在cmd中使用 gulp gulps 执行
3.一些api解释
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var minJs = require('gulp-uglify');
var rev = require('gulp-rev') ;
var rename = require('gulp-rename');//重名名 示例压缩css,
/*task 定义一个gulp任务,含三个个参数,
第一个参数为任务名,必填;
第二个参数为依赖的任务,选填,
第三个为回调函数里面执行的是必要的插件操作,必填
src 为指定文件路径,可使用正则匹配
dest 指定输出位置,
*/
gulp.task('total-css', () => {
return gulp.src('Public/static/css/home/newKdBeiFen/*.css')
.pipe(rename({suffix:'.min'}))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(gulp.dest('Public/static/css/home/monicss/'));
});
/*watch用于监听文件发生变化,文件发生改变就会执行该处指定的任务*/
gulp.task('watch',function(){
gulp.watch('Public/static/css/home/newKdBeiFen/*.css',['total-css']);
})
3.下面记录的均为gulp 的常用插件安装 以下使用均为(npm install 插件名 --save-dev
)
gulp-load-plugins :自动加载 package.json 中的 gulp 插件,避免一个个require插
gulp-rename: 重命名
gulp-uglify:文件压缩
gulp-concat:文件合并
gulp-less:编译 less
gulp-clean-css:压缩 CSS 文件
gulp-htmlmin:压缩 HTML 文件
gulp-babel: 使用 babel 编译 JS 文件
gulp-jshint:jshint 检查
gulp-rev:添加时间戳
gulp-rev-collector:替换html中的link,srcipt
gulp-run-sequence:同步执行
gulp-imagemin:压缩jpg、png、gif等图片
gulp-rev-append:使用查询字符串文件哈希缓存文件的gulp插件
gulp-livereload:当代码变化时,它可以帮我们自动刷新页面,除在模块中需要安装外,还需要在浏览器中安装。
使用示参考
下面方法来自百度的参考感谢大佬的分享,
像我这项目一般缓存都为几年所以我们需要加入?xxx清除缓存,以css文件为例
/引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src('Public/static/css/home/newKdBeiFen/*.css')
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('Public/static/css/home/monicss/'));
});//Html替换css文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', 'View/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('View'));
}); //按顺序执行
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revHtml'],
done);
}); gulp.task('default', ['dev']); //在cmd 执行gulp default 此时我们生成的并不是我们所需的样子,需要再去源文件处修改一些代码 打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash; 打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename +'-'+ hash + ext;
更新为: return filename + ext; 打开node_modules\gulp-rev-collector\index.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) { 打开node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ), 生成 <linkrel="stylesheet"href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>
2.还一种添加哈希值清除缓存的方式
html部分 需要在尾部添加?rev=@@hash 在执行后就会将@@hash替换成哈希值
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style-one.css?rev=@@hash">
<script src="script/script-one.js?rev=@@hash"></script>
<script src="script/script-two.js"></script>
</head>
<body>
<div><p>hello, world!</p></div>
<script src="script/script-three.js?rev=@@hash"></script>
</body>
</html> 配置部分
var rev = require('gulp-rev-append'); gulp.task('rev', function() {
gulp.src('./index.html')
.pipe(rev())
.pipe(gulp.dest('.'));
});
初识gulp的更多相关文章
- gulp 学习笔记 (初识)
根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...
- 自动化构建工具--gulp的初识和使用
gulp 首先:什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我 ...
- 解读ASP.NET 5 & MVC6系列(2):初识项目
初识项目 打开VS2015,创建Web项目,选择ASP.NET Web Application,在弹出的窗口里选择ASP.NET 5 Website模板创建项目,图示如下: 我们可以看到,此时Web ...
- 初识node.js(通过npm下载项目依赖的包的过程)
一.初识node.js 简单的说Node.js 就是运行在服务器端的JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
随机推荐
- leetcode 7 reverse integer 反转整数
描述: 给定32位整数,反转,如321转成123. 解决: 关键是溢出检测: int reverse(int x) { ; int temp; while (x) { temp = ret * + x ...
- 两个链表的交叉 · Intersection of Two Linked Lists
[抄题]: Write a program to find the node at which the intersection of two singly linked lists begins. ...
- Trait 概览
Trait是PHP 5.4引入的新概念,看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait ...
- 全球顶尖大学的UX课程资源,英文!
本文由MOCKPLUS团队原创,转载请标明出处,原型设计工具就用更快.更简单的mockplus 要想成为一名优秀的UX设计师,需要掌握很多必备技能.比如,掌握用户体验设计的所有知识和信息架构(易用性方 ...
- 关闭Found duplicated code
IDEA中的这个“发现重复代码 - Found duplicated code“的这个提示甚是烦躁. Settings —> Editor —> Inspections —> Gen ...
- Java设计模式(6)——建造者模式
定义:Builder模式也叫建造者模式或者生成器模式,Builder模式是一种对象创建型模式之一,用来隐藏复合对象(对象的属性为另一个对象的引用)的创建过程,它把复合对象的创建过程交给Builder, ...
- 如何在Github上删除项目及某个文件
在Github上删除项目 在GitHub仓库中找到已经建立好的某个仓库,本篇文章以我的myBookCodes仓库为例,在建立的myBookCodes仓库中首先找到settings选项,如图所示: 将页 ...
- 【转】java遍历实体类的属性和数据类型以及属性值
和同学接了个外包的活,由于项目中很多地方要用到poi导出excel,而每次导出都要写很多相同的代码,因为poi的cell.setCellValue();每次设置的都是不同实体bean的属性值,导致代码 ...
- Linux上编译hadoop-2.7.1的libhdfs.so和libhdfs.a
hadoop提供了CMake来编译libhdfs,因此在编译之前需要先安装好CMake工具. 然后进入libhdfs的源代码目录,如:/data/hadoop-2.7.1-src/hadoop-hdf ...
- Understanding String Table Size in HotSpot
In JDK-6962930[2], it requested that string table size be configurable. The resolved date of that b ...