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

Question

我在我的项目中使用gulp-angular，我的问题是我没有足够的节点和 gulp 经验来修改默认脚本任务。

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

这是几乎所有事情都完成的默认文件：** 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

从简单的开始，先将两个 css 文件一起 gulp 来逐步了解它是如何工作的

1. 创建一个 gulp 任务并将其命名为“css”之类的名称

   gulp.task('css', function(){ //代码放在这里 })

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

   gulp.src(['filename1','filename2','every/css/file/inThis/dir/*.css])

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

   .pipe(concat('main.css')) .pipe(gulp.dest('public/css/'));

4. 现在在终端运行gulp css

5. 大家一起来

   gulp.task('css', function () { 吞咽.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

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

.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);
  })