gulp-cdnizer 使用教程

28 0 0

gulp-cdnizer 使用教程

gulp-cdnizerA gulp plugin for replacing local links with CDN links, includes fallbacks and customization项目地址:https://gitcode.com/gh_mirrors/gu/gulp-cdnizer

1. 项目的目录结构及介绍




gulp-cdnizer/


├── lib/


│   ├── cdnizer.js


│   └── utils.js


├── node_modules/


├── test/


│   ├── fixtures/


│   └── test.js


├── .gitignore


├── .npmignore


├── .travis.yml


├── LICENSE


├── README.md


├── gulpfile.js


├── package.json


└── index.js

lib/: 包含核心功能的实现文件。
cdnizer.js: 主要逻辑文件，负责处理文件路径替换。utils.js: 辅助工具函数。 node_modules/: 依赖模块。test/: 测试文件。
fixtures/: 测试用例文件。test.js: 测试脚本。 .gitignore: Git 忽略文件配置。.npmignore: npm 发布时忽略的文件配置。.travis.yml: Travis CI 配置文件。LICENSE: 开源许可证。README.md: 项目说明文档。gulpfile.js: Gulp 任务配置文件。package.json: 项目依赖和脚本配置。index.js: 项目入口文件。

2. 项目的启动文件介绍

index.js:




var through = require('through2');


var gutil = require('gulp-util');


var PluginError = gutil.PluginError;


var cdnizer = require('./lib/cdnizer');


 


module.exports = function(options) {


  return through.obj(function(file, enc, cb) {


    if (file.isNull()) {


      cb(null, file);


      return;


    }


 


    if (file.isStream()) {


      cb(new PluginError('gulp-cdnizer', 'Streaming not supported'));


      return;


    }


 


    try {


      file.contents = new Buffer(cdnizer(file.contents.toString(), options));


      this.push(file);


    } catch (err) {


      this.emit('error', new PluginError('gulp-cdnizer', err));


    }


 


    cb();


  });


};

该文件是项目的入口文件，导出了一个函数，该函数返回一个 through2 对象，用于处理文件流。主要功能是读取文件内容，调用 cdnizer 函数处理内容，并将处理后的内容写回文件。

3. 项目的配置文件介绍

gulpfile.js:




var gulp = require('gulp');


var cdnizer = require('./index');


 


gulp.task('cdn', function() {


  return gulp.src('tmp/serve/index.html')


    .pipe(cdnizer({


      defaultCDNBase: '//cdnjs.cloudflare.com/ajax/libs',


      allowRev: true,


      allowMin: true,


      files: [


        'google:angular',


        'cdnjs:jquery'


      ]


    }))


    .pipe(gulp.dest('dist'));


});

gulpfile.js 是 Gulp 任务配置文件，定义了 cdn 任务。该任务读取 tmp/serve/index.html 文件，使用 cdnizer 插件处理文件内容，并将处理后的文件输出到 dist 目录。配置项包括 defaultCDNBase、allowRev、allowMin 和 files，用于指定 CDN 基础路径、是否允许版本号和最小化文件，以及需要替换的文件列表。

以上是 gulp-cdnizer 项目的目录结构、启动文件和配置文件的介绍。希望这份教程能帮助你更好地理解和使用该项目。

gulp-cdnizerA gulp plugin for replacing local links with CDN links, includes fallbacks and customization项目地址:https://gitcode.com/gh_mirrors/gu/gulp-cdnizer

# 随笔