Question

我配置了gulp任务，可以获取所有资产（css / js文件）使用修订版后缀缩小它们和输出：

gulp.task('build', ['make-cache'], function() {
var assets = $.useref.assets({searchPath: './'}),
    js = plugins.filter('**/scripts.js');

    return gulp
    .src(config.index)
    // handle errors
    .pipe(plugins.plumber())
    // collect all assets from source file by the means of useref
    .pipe(assets)
    // process js
    .pipe(js)
    .pipe($.uglify())
    .pipe(js.restore())  
    // Take inventory of the file names for future rev numbers
    .pipe($.rev())
    // Apply the concat and file replacement with useref
    .pipe(assets.restore())
    .pipe($.useref())
    // Replace the file names in the html with rev numbers
    .pipe($.revReplace())
    .pipe(gulp.dest(config.dist));
})

注意：在此示例中，我使用gulp-load-plugins插件，因此$实际上是一个已加载所有gulp插件的变量。

这将创建如下文件scripts-abcd123.js并更改html文件中的修订版。

我想知道是否有一个gulp插件可以获取这个生成的javascript文件并添加一个html文件的异步加载器。

所以，而不是： <script src="scripts-abcd123.js"></script>

它变成了：

var sc=document.createElement("script");
sc.src="scripts-abcd123.js";
document.getElementsByTagName("head")[0].appendChild(sc);

类似的技术用于粉碎杂志网站（例如用于加载样式表）：

<script id="smash-main-css-js">var ms=document.createElement("link");ms.rel="stylesheet";ms.href="http://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/css/main.min.css?ver=3.2";document.getElementsByTagName("head")[0].appendChild(ms);</script>

绝对不是手动更改。据我所知，他们使用咕噜声。我正在寻找类似的gulp解决方案。或者，至少将我的注意力集中在一个咕噜插件上，如果有一个公共插件。我试图在谷歌搜索，但所有结果都与gulp-load-plugins相关，后者只是自动加载gulp插件并使用它。

Gulp插件/任务以异步方式加载资产

0 个答案: