3

gulp watch-dev当我使用（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被调用watch-dev来为开发环境构建 index.html。这是我gulpfile.js的片段： 

<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 -->

所有以开头的../都不存在于文件夹中。其他存在，但它们仍然处于不良状态。

4

3 回答 3

2

在您要通配文件的 gulp 构建脚本中，在其他 *.js 文件之前指定您的 *.module.js。

   gulp.src([
        '/**/*.modules.js',
        '/**/*.js',
        ]).pipe(ngFilesort()),
于 2015-12-29T16:17:15.810 回答
0

使用 gulp 包 gulp-html-replace 来订购 js 声明

更多细节

https://www.npmjs.com/package/gulp-html-replace

如果您想要缩小/连接的 js 文件，编辑gulp-html-replace 会提供很大帮助。使用串联，您可以分离供应商 js 和自定义 js 文件我没有尝试将它与 gulp-inject 一起使用，这可能有助于通过 gulp-html-replace 控制要按顺序注入的内容

gulp.task('htmlwrite', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'vendorjs': ['vendor.min.js','common.js'], // naming the js for the ordring, multiple files can be added using array 
        'mainjs': 'main.min.js'
    }))
    .pipe(gulp.dest('dist/'));
});

并在 index.html

<!-- build:vendorjs -->
//includes the vendor js declaration
      <!-- endbuild -->

 <!-- build:mainjs -->

    <!-- endbuild -->

您也可以使用gulp-usemin，似乎它可以解决您的问题使用类似的 js 注入，如 gulp-html-replace

于 2015-12-29T16:22:44.517 回答
0

不要问我为什么有效。gulp-print 做了一件不应该做的奇怪事情（非常方便）。

我做了以下功能来查看管道输出：

var plugins = require('gulp-load-plugins')();

pipes.testingShit = function() {
  return plugins.print(function(filepath) {
    return "built: " + filepath;
  });
};

然后我修改了以下函数进行调试，你就有了奇迹。

来自：

pipes.orderedAppScripts = function() {
  return plugins.angularFilesort();
};

至：

pipes.orderedAppScripts = function() {
  return pipes.testingShit(plugins.angularFilesort());
};

gulp-print由于我不知道的原因应该在终端中打印输出的插件正在反转管道。这是一个奇怪的事情，我现在无法解释。

于 2015-12-30T01:24:46.097 回答