之前一段时间学习使用了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. unity3d 移动与旋转 1

    移动与旋转 1 player角色随asdw按键左右上下移动并旋转 public void Update() { // Reset player rotation to look in the same ...

  2. unity平行光太亮?物体发白?可能你使用了2个或多个平行光

    unity平行光太亮?物体发白?可能你使用了2个或多个平行光 今天做项目时就遇到了这个问题,光亮得让物体发白 发现加载的场景 里面有个 平行光,删了就好了 要是感觉还是太亮,就把主平行光的Intens ...

  3. OGNL入门

    ------------------siwuxie095 OGNL 入门 1.OGNL 支持对象方法调用,即 objName.methodName() 如:使用 OGNL 表达式 + Struts2 ...

  4. MongoDB管理与开发实战详解文摘

    第1篇 基础篇 第1章 MongoDB简介 关系型数据库面临的问题:数据库并发负载高,海量数据存储与访问,数据库数据越来越大,事务管理的负担,关系型数据库读.写实时性的忽略,多表关联查询被弱化 第2章 ...

  5. [Android] 对ImageView设置属性scaleType为FIT_START,如何去掉多余空白

    当对ImageView设置了属性scaleType为FIT_START时,可以通过调用ImageView的setAdjustViewBounds(true). 即: imageView.setScal ...

  6. 查找mysql的my.cnf位置

    1. which mysqld /user/local/mysql/bin/mysqld --verbose --help |grep -A 1 'Default options'

  7. input中的disabled、readonly和hidden

    最近开发项目的时候,遇到一个问题,就是我希望某个input中的值不能被修改,刚开始的时候,我想到的是disabled属性!但是,发现表单提交后,值无法传递过来! 解决方法: 可以设置其readonly ...

  8. 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 ...

  9. Java反射API研究(3)——java.lang.Class<T>

    对于反射来说,Class是核心,任何反射的对象都需要通过Class来获得. Class 类的实例表示正在运行的 Java 应用程序中的类和接口.枚举是一种类,注释是一种接口.每个数组属于被映射为 Cl ...

  10. [leetcode] 9. Binary Tree Level Order Traversal

    跟第七题一样,把最后的输出顺序换一下就行... Given a binary tree, return the level order traversal of its nodes' values. ...