初识gulp

2018-06-24 02:11:47来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

    之前一段时间学习使用了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-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 10return filename +'-'+ hash + ext; 更新为: return filename + ext;


打开node_modules\gulp-rev-collector\index.js 31if ( !_.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>

 

 

 

      

 

        

        

 

 

    

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:类型“Observable&lt;Response&gt;”上不存在属性“map”

下一篇:JS高程学习笔记:ECMAScript引用类型之Array类型(一)