Gulp inject插件的startTag和endTag

作者

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2016/04/25/gulp-inject-start-end-tag/

最近接触了一些前端的东西，在Gulp之下有若干插件，配合起来对于新手而言简直神乎其神，难以理解。

以gulp-inject为例，只需要在页面中添加

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>

  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>

然后配合配置

var gulp = require('gulp');
var inject = require('gulp-inject');

gulp.task('index', function () {
  var target = gulp.src('./src/index.html');
  // It's not necessary to read the files (will speed up things), we're only after their paths:
  var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});

  return target.pipe(inject(sources))
    .pipe(gulp.dest('./src'));
});

就可以自动注入js和css文件。

对于写在html中的那些tag是如何解析的，如果需要自定义怎么办，我很好奇，所以稍微看了一下源代码，gulp-inject真的很小巧（不知道是不是node项目都是这样的）

gulp-inject

当传入文件列表之后，会对所有的文件进行分析（主要是文件类型），然后获得startAndEndTags，其中会根据文件后缀获取对应的类型tag

var DEFAULTS = {
  STARTS: {
    'html': '<!-- {{name}}:{{ext}} -->',
    'jsx': '{/* {{name}}:{{ext}} */}',
    'jade': '//- {{name}}:{{ext}}',
    'slm': '/ {{name}}:{{ext}}',
    'slim': '/ {{name}}:{{ext}}',
    'haml': '-# {{name}}:{{ext}}',
    'less': '/* {{name}}:{{ext}} */',
    'sass': '/* {{name}}:{{ext}} */',
    'scss': '/* {{name}}:{{ext}} */'
  },
  ENDS: {
    'html': '<!-- endinject -->',
    'jsx': '{/* endinject */}',
    'jade': '//- endinject',
    'slm': '/ endinject',
    'slim': '/ endinject',
    'haml': '-# endinject',
    'less': '/* endinject */',
    'sass': '/* endinject */',
    'scss': '/* endinject */'
  }
};

这里是默认的定义，比如html文件中的js和css就是

<!-- inject:js -->
<!-- inject:css -->

而结尾是不区分类型的，都是<!-- endinject -->

这也是为什么例子中的tag能够工作的原因。

如果需要自定义tag，只需要在运行的opt中传入即可，具体的在这里

var startTag = opt.tags.start(targetExt, ext, opt.starttag);
var endTag = opt.tags.end(targetExt, ext, opt.endtag);

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2016/04/25/gulp-inject-start-end-tag/

发表评论