FountainJs - app.js 和 vendor.js 在哪里生成答案

【问题标题】：FountainJs - Where do app.js and vendor.js gets generatedFountainJs - app.js 和 vendor.js 在哪里生成
【发布时间】：2017-04-11 22:45:24
【问题描述】：

我有点不知所措。

http://fountainjs.io/

我在一个项目中使用喷泉Js，使用以下配置：

AngularJs 1.5
纯javascript
吞咽
SCC

问题是，我有这个项目结构：

SRC
|- APP
  |-folder1
    |- file1.js
    |- file2.js
  |-folder2
    |- file3.js
    |- file4.js
|- common1.js


environment_variable='folder1'

并且希望 app.js 只包含一个文件夹中的 JS 文件，由环境变量 (file1.js,file2.js) 定义，以及常见的 (common1.js)。相反，每次我构建时，它都会将所有 JS 文件 uglified 到 app.js 中，从而产生各种冲突。

有什么想法或指南供我使用吗？我怀疑是 build.js 文件造成了这一切，我不明白那里发生了什么。

const gulp = require('gulp');
const filter = require('gulp-filter');
const useref = require('gulp-useref');
const lazypipe = require('lazypipe');
const rev = require('gulp-rev');
const revReplace = require('gulp-rev-replace');
const uglify = require('gulp-uglify');
const cssnano = require('gulp-cssnano');
const htmlmin = require('gulp-htmlmin');
const sourcemaps = require('gulp-sourcemaps');
const uglifySaveLicense = require('uglify-save-license');
const inject = require('gulp-inject');
const ngAnnotate = require('gulp-ng-annotate');

const conf = require('../conf/gulp.conf');

gulp.task('build', build);

function build() {
  const partialsInjectFile = gulp.src(conf.path.tmp('templateCacheHtml.js'), {read: false});
  const partialsInjectOptions = {
    starttag: '<!-- inject:partials -->',
    ignorePath: conf.paths.tmp,
    addRootSlash: false
  };

  const htmlFilter = filter(conf.path.tmp('*.html'), {restore: true});
  const jsFilter = filter(conf.path.tmp('**/*.js'), {restore: true});
  const cssFilter = filter(conf.path.tmp('**/*.css'), {restore: true});

  return gulp.src(conf.path.tmp('/index.html'))
    .pipe(inject(partialsInjectFile, partialsInjectOptions))
    .pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))
    .pipe(jsFilter)
    .pipe(ngAnnotate())
    .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
    .pipe(rev())
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(cssnano())
    .pipe(rev())
    .pipe(cssFilter.restore)
    .pipe(revReplace())
    .pipe(sourcemaps.write('maps'))
    .pipe(htmlFilter)
    .pipe(htmlmin())
    .pipe(htmlFilter.restore)
    .pipe(gulp.dest(conf.path.dist()))
        .pipe(gulp.src(conf.path.src('/templates/**/*')).pipe(gulp.dest(conf.path.dist('/templates'))));
}

【问题讨论】：

标签： javascript angularjs gulp yeoman-generator

【解决方案1】：

根据我对您问题的理解，您希望从folder2 中排除 js 文件。

为此，您应该在过滤器中排除该路径，您可以使用以下内容：

const jsFilter = filter(
    conf.path.tmp(['**/*.js', '!folder2/*.js']), {restore: true}
);

【讨论】：

【解决方案2】：

我在使用 FountainJs 时也遇到了一些问题。我在项目已经基本完成时开始使用它，因此我不得不做出一些妥协以使构建系统适合项目。

现在build 任务甚至没有创建app.js 文件。您可以尝试使用gulp-debug 来查看通过管道传递的文件。

【讨论】：

【解决方案3】：

构建脚本利用gulp-useref 连接使用gulp-inject 注入index.html 的脚本和样式。两个插件都搜索特殊的cmets，gulp-inject使用：

gulp-useref 使用：

所以在index.html的cmets中提到了所有需要的东西，你可以参考插件文档来获取详细信息。

此外，您可以查看我很久以前 fork 并维护的Angular-Gulp-Boilerplate，以保持依赖关系最新并引入新功能，因为它已用于生产项目。

【讨论】：