我正试图让一个gruntfile在Laravel应用程序中连接/uglify javascript文件。我的所有任务都是孤立工作的,但无论出于什么原因,我的输入javascript文件的路径都没有正确设置。
下面是我的一个刀片模板示例:
@section('scripts')
<!-- build:js /js/min/page.min.js -->
<script type="text/javascript" src="/js/scrollIt.min.js"></script>
<script type="text/javascript" src="/js/jquery.omniwindow.js"></script>
<script type="text/javascript" src="/js/isotope.min.js"></script>
<!-- endbuild -->
@stop
以下是我的useminPrepare/usemin任务定义:
useminPrepare: {
html: 'app/views/**/*.blade.php',
options: {
dest: 'app/views/dist'
}
},
usemin: {
options: {
assetDirs: [ 'public/js' ]
},
html: [ 'app/views/dist/**/*.blade.php' ]
},
我没有定义uglify
任务,我只是依赖usemin将生成的任务。
所有模板都正确地进入"app/views/dist"目录,并进行了正确的替换(在上面的示例中,模板中包含public/js/min/page.min.js
处的单个javascript文件)。在处理过程中,我注意到输出:
$ grunt build
Running "useminPrepare:html" (useminPrepare) task
Going through {list of templates} to update the config
Looking for build script HTML comment blocks
Configuration is now:
concat:
{ generated:
{ files:
[ { dest: '.tmp/concat/js/min/page.min.js',
src:
[ 'app/views/course/js/scrollIt.min.js',
'app/views/course/js/jquery.omniwindow.js',
'app/views/course/js/isotope.min.js' ] },
] } }
uglify:
{ generated:
{ files:
[ { dest: 'app/views/dist/js/min/page.min.js',
src: [ '.tmp/concat/js/min/page.min.js' ] },
] } }
cssmin:
{}
正如您在上面看到的,它在app/views/course/js
目录中查找我的javascript文件,这是不正确的。为什么会这样?我想在我的usemin任务中指定assetDirs: ['public/js']
会告诉grunt在哪里可以找到这些文件。我试着把脚本引用改成这样:
<script type="text/javascript" src="../../../public/js/scrollIt.min.js"></script>
这导致了一个成功的构建,但破坏了我的本地开发,所以这绝对不是一个解决方案。我需要以某种方式覆盖uglify:generated
任务吗?如果需要,我该如何为具有生成文件名的多个不同模板进行覆盖?
如果有必要,你可以在这里看到我的Gruntfile.js的全部内容。您可以看到,我还添加了一个新的copy
任务,用于将Javascript文件从app/views/dist/js/min
复制回public/js/min
。我也想摆脱这个问题,但如果我能绕过这个问题,我会很高兴的。
这里的答案实际上相对简单,并且可以直接从usemin文档中收集(只要我开始认真查找):
块表示为:
<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
在我使用Laravel的情况下,我需要指定一个public/
的替代搜索路径,它最终运行得很好:
@section('scripts')
<!-- build:js(public/) /js/min/script.min.js -->
<script type="text/javascript" src="/js/script1.js"></script>
<script type="text/javascript" src="/js/script2.js"></script>
<script type="text/javascript" src="/js/script3.js"></script>
<script type="text/javascript" src="/js/script4.js"></script>
<!-- endbuid -->
@stop