angular gulp-如何根据每个src文件夹拆分dist文件夹中的js文件

Question

我为我的项目使用了gulp-angular ，而我的问题是我对节点和gulp的经验不足，无法修改默认脚本任务。

我希望能够为我的应用程序的每个文件夹生成一个优化的js文件，该文件包含此特定文件夹的所有其他js文件，并对每个文件夹重复此过程。 这样的东西

这是几乎完成所有操作的默认文件：** build.js **

'use strict';

var gulp = require('gulp');

var $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});

module.exports = function(options) {
  gulp.task('partials', function () {
    return gulp.src([
      options.src + '/app/**/*.html',
      options.tmp + '/serve/app/**/*.html'
    ])
      .pipe($.minifyHtml({
        empty: true,
        spare: true,
        quotes: true
      }))
      .pipe($.angularTemplatecache('templateCacheHtml.js', {
        module: 'gulpTest',
        root: 'app'
      }))
      .pipe(gulp.dest(options.tmp + '/partials/'));
  });

  gulp.task('html', ['inject', 'partials'], function () {
    var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', { read: false });
    var partialsInjectOptions = {
      starttag: '<!-- inject:partials -->',
      ignorePath: options.tmp + '/partials',
      addRootSlash: false
    };

    var htmlFilter = $.filter('*.html');
    var jsFilter = $.filter('**/*.js');
    var cssFilter = $.filter('**/*.css');
    var assets;

    return gulp.src(options.tmp + '/serve/*.html')
      .pipe($.inject(partialsInjectFile, partialsInjectOptions))
      .pipe(assets = $.useref.assets())
      .pipe($.rev())
      .pipe(jsFilter)
      .pipe($.ngAnnotate())
      .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', options.errorHandler('Uglify'))
      .pipe(jsFilter.restore())
      .pipe(cssFilter)
      .pipe($.csso())
      .pipe(cssFilter.restore())
      .pipe(assets.restore())
      .pipe($.useref())
      .pipe($.revReplace())
      .pipe(htmlFilter)
      .pipe($.minifyHtml({
        empty: true,
        spare: true,
        quotes: true,
        conditionals: true
      }))
      .pipe(htmlFilter.restore())
      .pipe(gulp.dest(options.dist + '/'))
      .pipe($.size({ title: options.dist + '/', showFiles: true }));
  });

  // Only applies for fonts from bower dependencies
  // Custom fonts are handled by the "other" task
  gulp.task('fonts', function () {
    return gulp.src($.mainBowerFiles())
      .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
      .pipe($.flatten())
      .pipe(gulp.dest(options.dist + '/fonts/'));
  });

  gulp.task('other', function () {
    return gulp.src([
      options.src + '/**/*',
      '!' + options.src + '/**/*.{html,css,js}'
    ])
      .pipe(gulp.dest(options.dist + '/'));
  });

  gulp.task('clean', function (done) {
    $.del([options.dist + '/', options.tmp + '/'], done);
  });

  gulp.task('build', ['html', 'fonts', 'other']);
};

一旦我们运行cmd：

gulp build

所有的html，css，js等文件都经过缩小，丑化，串联等处理，并放置在具有以下结构的dist文件夹中：

──  dist/
│   │   ├──  styles/
│   │   │   │   ├──  app-e4a4643d.css
│   │   │   │   └──  vendor-2183d05f.css
│   │   ├──  scripts/
│   │   │   ├──  app-078d1fc3.js
│   │   │   ├──  vendor-b58797da.js
│   ├──  404.html
│   ├──  favico.ico
│   └──  index.html

另外，我也不了解如何生成优化文件的名称。

因此，回顾一下，我想在dist / scripts文件夹中放入一定数量的javascript文件，使其等于应用程序中现有视图的数量，然后根据需要将其重命名...

有谁可以向我解释我应该做什么？

Answer 1

首先启动简单的gulp两个css文件，以逐步了解其工作原理

1. 创建一个gulp任务，并将其命名为“ css”

   gulp.task（'css'，function（）{//代码在这里}）

2. 使用*.filetype创建要连接的文件数组，以将所有内容包括在目录中

   gulp.src（[ '文件名1'， '文件名2'，'每/ CSS /文件/ inThis /目录/ *。CSS]）

3. 合并结果，这会从已合并和编译的资产中在您的公共目录中创建一个main.css文件

   .pipe（concat（'main.css'））.pipe（gulp.dest（'public / css /'））;

4. 现在在终端中运行gulp css

5. 一起在下面

   gulp.task（'css'，function（）{gulp.src（['./bower_components/angular-material/angular-material.css'，'./assets/css/*.css']）.pipe（concat （'main.css'））.pipe（gulp.dest（'public / css /'））;}）;

最后但并非最不重要的一点是，如果您想尝试一些挑战，尝试编译sass，我使用node-bourbon

Answer 2

从用于Angular和Gulp开发的项目模板angularcoffee-boilerplate看这个gulpfile.js 。

使用以下命令将.js和.coffee文件连接为一个文件：

var obj = gulp.src(['script1.coffee','script2.coffee')
    .pipe(sourcemaps.init())
    .pipe(coffee({ bare: false, header: false }))
    .pipe(addsrc(['script1.js','script2.js'));

if (options.minify)
    obj = obj.pipe(uglify());

return obj
  .pipe(concat('all.min.js'))
  .pipe(sourcemaps.write('maps'))
  .pipe(gulp.dest(destinationpaths.js))
  .on('error', function (error) {
        console.error('' + error);
  })