使用gulp-inject自动注入css或js

今天加到一个需求，需要在所有的页面中增加埋点，因为所有页面比较多，而且页面中没有引入公用部分，所以想有什么绑定可以动态加载页面呢？毕竟在每个页面中手动去加载一个文件是比较低效的工作。受另一个项目的启发，想到是否可以在打包时引入。除了解决这个问题以外，还有一个原因就是不想在开发环境下引入埋点。

经过资料查询，找到一个插件gulp-inject(因为项目是使用gulp打包)可以满足这一要求，gulp-inject基本使用如下：

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'));
});

具体使用可以到github上看官方说明

不过使用gulp-inject还是要去修改每个页面，即需要在每个页面中加入注释，比如：

<!-- inject:js -->
<!-- endinject -->

虽然仍然需要修改每个页面，但是它加入的只是一些注释内容，对开发环境无任何影响；而且如果后续需要再加入一个文件，页面就不需要再改动了。