当我使用gulp watch-dev
构建我的angular页面时,以下是我的脚本(gulpfile.js
在代码片段的末尾)。
<!-- inject:js -->
<script src="shared/toolbar/toolbarDirective.js"></script>
<script src="shared/sidebar/sidebarDirective.js"></script>
<script src="shared/sidebar/sidbarController.js"></script>
<script src="components/home/homeService.js"></script>
<script src="components/blog/blogService.js"></script>
<script src="components/blog/blogController.js"></script>
<script src="app.modules.js"></script>
<script src="app.routes.js"></script>
<!-- endinject -->
我希望将app.modules.js
置于其他脚本之上。我该如何做?
以下是文件结构:
app
|
|--shared
| |--sidebar
| | |--sidebarController.js
| | |--sidebarDirective.js
| | |--sidebarTemplate.html
| |
| |--toolbar
| |--toolDirective.js
| |--toolbarTemplate.html
|
|--components
| |--home
| | |--sidebarDirective.js
| | |--homeView.html
| |
| |--blog
| |--sidebarDirective.js
| |--blogView.html
|
|--app.modules.js
|--app.routes.js
|--index.html
这是我认为事情失败的地方:
pipes.orderedAppScripts = function() {
return plugins.angularFilesort();
};
pipes.builtIndexDev = function() {
// sends verified vendor js in dev folder and catch a pipe ordered
var orderedVendorScripts = pipes.builtVendorScriptsDev()
.pipe(pipes.orderedVendorScripts());
// sends verified app js in dev folder and catch a pipe ordered
var orderedAppScripts = pipes.builtAppScriptsDev()
.pipe(pipes.orderedAppScripts());
var appStyles = pipes.builtStylesDev();
return pipes.validatedIndex()
.pipe(gulp.dest(paths.distDev)) // write first to get relative path for inject
.pipe(plugins.inject(orderedVendorScripts, {relative: true, name: 'bower'}))
.pipe(plugins.inject(orderedAppScripts, {relative: true}))
.pipe(plugins.inject(appStyles, {relative: true}))
.pipe(gulp.dest(paths.distDev));
};
buildIndexDev
is called in watch-dev
to build index.html for development environment.
Here is my gulpfile.js
in the snippet:
<script src="https://gist.github.com/aemb/43ca3dbc7056157f952d.js"></script>
@HenryZou,这样做存在一些副作用:
pipes.orderedAppScripts = function() {
return gulp.src([
'./**/*.modules.js',
'./**/*.js',
]).pipe(plugins.angularFilesort());
};
这里有一个奇怪的事情:
<!-- inject:js -->
<script src="shared/toolbar/toolbarDirective.js"></script>
<script src="../distDev/gulpfile.js"></script>
<script src="../distDev/distDev/app.modules.js"></script>
<script src="../distDev/app.routes.js"></script>
<script src="shared/sidebar/sidebarDirective.js"></script>
<script src="../devServer/routes.js"></script>
<script src="shared/sidebar/sidebarController.js"></script>
<script src="../app/app.routes.js"></script>
<script src="../server.js"></script>
<script src="components/home/homeService.js"></script>
<script src="../gulpfile.js"></script>
<script src="components/blog/blogService.js"></script>
<script src="components/blog/blogController.js"></script>
<script src="app.routes.js"></script>
<script src="app.modules.js"></script>
<script src="../distDev/app/app.modules.js"></script>
<script src="../distDev/app.modules.js"></script>
<script src="../app/app.modules.js"></script>
<!-- endinject -->
所有以
../
开头的文件在文件夹中不存在。其他文件存在,但它们仍然处于混乱状态。