之前一段时间学习使用了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的更多相关文章

  1. gulp 学习笔记 (初识)

    根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...

  2. 自动化构建工具--gulp的初识和使用

    gulp 首先:什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我 ...

  3. 解读ASP.NET 5 & MVC6系列(2):初识项目

    初识项目 打开VS2015,创建Web项目,选择ASP.NET Web Application,在弹出的窗口里选择ASP.NET 5 Website模板创建项目,图示如下: 我们可以看到,此时Web ...

  4. 初识node.js(通过npm下载项目依赖的包的过程)

    一.初识node.js 简单的说Node.js 就是运行在服务器端的JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事 ...

  5. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  6. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  7. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  8. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  9. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

随机推荐

  1. leetcode 7 reverse integer 反转整数

    描述: 给定32位整数,反转,如321转成123. 解决: 关键是溢出检测: int reverse(int x) { ; int temp; while (x) { temp = ret * + x ...

  2. 两个链表的交叉 · Intersection of Two Linked Lists

    [抄题]: Write a program to find the node at which the intersection of two singly linked lists begins. ...

  3. Trait 概览

    Trait是PHP 5.4引入的新概念,看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait ...

  4. 全球顶尖大学的UX课程资源,英文!

    本文由MOCKPLUS团队原创,转载请标明出处,原型设计工具就用更快.更简单的mockplus 要想成为一名优秀的UX设计师,需要掌握很多必备技能.比如,掌握用户体验设计的所有知识和信息架构(易用性方 ...

  5. 关闭Found duplicated code

    IDEA中的这个“发现重复代码 - Found duplicated code“的这个提示甚是烦躁. Settings —> Editor —> Inspections —> Gen ...

  6. Java设计模式(6)——建造者模式

    定义:Builder模式也叫建造者模式或者生成器模式,Builder模式是一种对象创建型模式之一,用来隐藏复合对象(对象的属性为另一个对象的引用)的创建过程,它把复合对象的创建过程交给Builder, ...

  7. 如何在Github上删除项目及某个文件

    在Github上删除项目 在GitHub仓库中找到已经建立好的某个仓库,本篇文章以我的myBookCodes仓库为例,在建立的myBookCodes仓库中首先找到settings选项,如图所示: 将页 ...

  8. 【转】java遍历实体类的属性和数据类型以及属性值

    和同学接了个外包的活,由于项目中很多地方要用到poi导出excel,而每次导出都要写很多相同的代码,因为poi的cell.setCellValue();每次设置的都是不同实体bean的属性值,导致代码 ...

  9. Linux上编译hadoop-2.7.1的libhdfs.so和libhdfs.a

    hadoop提供了CMake来编译libhdfs,因此在编译之前需要先安装好CMake工具. 然后进入libhdfs的源代码目录,如:/data/hadoop-2.7.1-src/hadoop-hdf ...

  10. Understanding String Table Size in HotSpot

    In JDK-6962930[2], it requested that string table size be configurable.  The resolved date of that b ...