gulp-useref – 不同级别文件夹中的相对输出path
目前有办法做相关的输出path吗? 在gulp-useref
或其他?
我目前的情况:
project_folder/ app/ index.html about/ index.html scripts/ index.js about.js
在基于app/
的index.html
,一切工作正常:
<!-- build:js scripts/main.min.js --> <script src="/scripts/main.js"></script> <!-- endbuild -->
index.html
文件位于scripts
文件夹旁边,以便相对path正确同步。
但是这里是about/index.html
:
如果我像这样传递path – ../scripts/about.min.js
– 生成的about.min.js
得到的输出文件夹太远,导致这种情况:
project_folder/ scripts/ about.min.js dist/ index.html about/ index.html scripts/ index.min.js
用about/index.html
在<script src="../scripts/about.min.js"></script>
寻找它。
如果我没有在about/index.html
传入相对path:
about.min.js
最终在适当的位置,但是在about/index.html
设置为<script src="scripts/about.min.js"></script>
path不正确。
build议? 我可以有不同版本的useref
任务运行在不同的文件夹级别。 我也考虑过一些方法来改变path后,基于它离基文件夹有多远,但我不知道从哪里开始,如果这是一个可行的select。 我只是不知道我是否错过了更明显的东西。
因为这是一个我正在放在一起的工具中的一个function,所以每次手动执行都不是真正可行的。
这是我的gulpfile.js
与此相关的片段。 我有一个运行在这之前的nunjucks
模板,所以这就是为什么它从.tmp
:
gulp.task('html', ['templates'], function() { var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']}); return gulp.src('.tmp/**/*.html') .pipe(assets) .pipe($.if('*.js', $.uglify())) .pipe($.if('*.css', $.csso())) .pipe($.rev()) .pipe(assets.restore()) .pipe($.useref()) .pipe($.revReplace()) .pipe($.gzip({append: false})) .pipe(gulp.dest('dist')) .pipe($.size({title: 'html'})); });
任何帮助,将不胜感激! 感谢您的工具!
为什么不使用绝对path?
<!-- build:js /scripts/main.min.js --> <!-- build:js /scripts/about.min.js -->
然后,您需要将您的索引文件移动到正确的位置,使用其他可能取决于上述任务的吞食任务。
gulp.task('full-build', ['partial-build'], function () { gulp.src('index.html', { base: './' }) .pipe(gulp.dest(buildLocation)); });
我有一个类似的问题。 我会尝试调整您的searchpath。 我最初的样子是这样的:
var assets = $.useref.assets({searchPath: './'});
改变它到这个固定它:
var assets = $.useref.assets({searchPath: ''});
我也面临类似的问题,并find解决办法。 它可以帮助别人
我的目标结构是这样的
Project_root app scripts index.html bower_component
而在index.html文件中,引用类似于由注入自动生成的以下内容
<!-- build:js js/lib.js --> <!-- bower:js --> <script src="../bower_components/jquery/dist/jquery.js"></script> <script src="../bower_components/angular/angular.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js js/app.js--> <!-- inject:js --> <script src="/app/scripts/app.js"></script> <script src="/app/scripts/controllers/authentication.js"></script> <!-- endinject --> <!-- endbuild -->
在gulpfile中,我设置了searchPath,并在输出文件中出现了一些奇怪的行为
$.useref.assets({searchPath: ''}); >> it generated only lib.js file $.useref.assets({searchPath: ['']}); >> it generated only app.js file
最后用下面的代码生成app.js和lib.js文件
$.useref.assets({searchPath: ['./bower_components','']});