初识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是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
随机推荐
- unity3d 移动与旋转 1
移动与旋转 1 player角色随asdw按键左右上下移动并旋转 public void Update() { // Reset player rotation to look in the same ...
- unity平行光太亮?物体发白?可能你使用了2个或多个平行光
unity平行光太亮?物体发白?可能你使用了2个或多个平行光 今天做项目时就遇到了这个问题,光亮得让物体发白 发现加载的场景 里面有个 平行光,删了就好了 要是感觉还是太亮,就把主平行光的Intens ...
- OGNL入门
------------------siwuxie095 OGNL 入门 1.OGNL 支持对象方法调用,即 objName.methodName() 如:使用 OGNL 表达式 + Struts2 ...
- MongoDB管理与开发实战详解文摘
第1篇 基础篇 第1章 MongoDB简介 关系型数据库面临的问题:数据库并发负载高,海量数据存储与访问,数据库数据越来越大,事务管理的负担,关系型数据库读.写实时性的忽略,多表关联查询被弱化 第2章 ...
- [Android] 对ImageView设置属性scaleType为FIT_START,如何去掉多余空白
当对ImageView设置了属性scaleType为FIT_START时,可以通过调用ImageView的setAdjustViewBounds(true). 即: imageView.setScal ...
- 查找mysql的my.cnf位置
1. which mysqld /user/local/mysql/bin/mysqld --verbose --help |grep -A 1 'Default options'
- input中的disabled、readonly和hidden
最近开发项目的时候,遇到一个问题,就是我希望某个input中的值不能被修改,刚开始的时候,我想到的是disabled属性!但是,发现表单提交后,值无法传递过来! 解决方法: 可以设置其readonly ...
- Codeforces761B Dasha and friends 2017-02-05 23:34 162人阅读 评论(0) 收藏
B. Dasha and friends time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- Java反射API研究(3)——java.lang.Class<T>
对于反射来说,Class是核心,任何反射的对象都需要通过Class来获得. Class 类的实例表示正在运行的 Java 应用程序中的类和接口.枚举是一种类,注释是一种接口.每个数组属于被映射为 Cl ...
- [leetcode] 9. Binary Tree Level Order Traversal
跟第七题一样,把最后的输出顺序换一下就行... Given a binary tree, return the level order traversal of its nodes' values. ...