Question

我使用gulp-angular作为我的项目，我的问题是我没有使用node和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任务并将其命名为'css'

gulp.task（'css'，function（）{//代码在这里}}
创建要连接的文件数组，使用*.filetype将所有内容包含在目录中

gulp.src（[ '文件名1'， '文件名2'，'每/ CSS /文件/ inThis /目录/ *。CSS]）
连接结果，从连接和编译的资产中创建公共目录中的main.css文件

.pipe（CONCAT（ '的main.css'）） .pipe（gulp.dest（ '公共/ CSS /'））;
现在正在终端运行gulp css
以下所有

gulp.task（'css'，function（）{ gulp.src（[ ” ./bower_components/angular-material/angular-material.css'， ” ./assets/css/*.css' ]） .pipe（CONCAT（ '的main.css'）） .pipe（gulp.dest（ '公共/ CSS /'））; }）;

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

Answer 2

从Angular和Gulp开发的项目模板gulpfile.js中查看此angularcoffee-boilerplate。

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

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

2 个答案: