JavaScript教程之初识gulp

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之初识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文件

1 var gulp = require('gulp');
3 gulp.task('gulps', () => {
4     return //需要执行的代码
5 });
8 
9 然后在cmd中使用 gulp gulps  执行

　　　　　　3.一些api解释

 1 var gulp = require('gulp');
 2 var cleanCSS = require('gulp-clean-css');
 3 var minJs = require('gulp-uglify');
 4 var rev = require('gulp-rev') ;
 5 var rename = require('gulp-rename');//重名名
 6 
 7 示例压缩css,
 8     /*task 定义一个gulp任务，含三个个参数，
 9            第一个参数为任务名，必填；
10            第二个参数为依赖的任务，选填，
11            第三个为回调函数里面执行的是必要的插件操作，必填
12      src 为指定文件路径，可使用正则匹配
13      dest 指定输出位置，
15     */
16 gulp.task('total-css', () => {
17     return gulp.src('Public/static/css/home/newKdBeiFen/*.css')
18         .pipe(rename({suffix:'.min'}))
19         .pipe(cleanCSS({ compatibility: 'ie8' }))
20         .pipe(gulp.dest('Public/static/css/home/monicss/'));
21 });        
22 /*watch用于监听文件发生变化，文件发生改变就会执行该处指定的任务*/
23 gulp.task('watch',function(){
24     gulp.watch('Public/static/css/home/newKdBeiFen/*.css',['total-css']);
25 })

　　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">

　　2.还一种添加哈希值清除缓存的方式

 1 html部分 需要在尾部添加？rev=@@hash 在执行后就会将@@hash替换成哈希值
 2 <!doctype html>
 3 <html>
 4   <head>
 5     <link rel="stylesheet" type="text/css" href="style/style-one.css?rev=@@hash">
 6     <script src="script/script-one.js?rev=@@hash"></script>
 7     <script src="script/script-two.js"></script>
 8   </head>
 9   <body>
10     <div><p>hello, world!</p></div>
11     <script src="script/script-three.js?rev=@@hash"></script>
12   </body>
13 </html>
14 
15 
16 配置部分
17 var rev = require('gulp-rev-append');
18 
19 gulp.task('rev', function() {
20   gulp.src('./index.html')
21     .pipe(rev())
22     .pipe(gulp.dest('.'));
23 });

栏目列表