Question

我有点不知所措。

我使用fountainJs进行项目，使用以下配置：

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文件包含在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'))));
}

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

gulp-useref使用：

因此index.html中的评论中提到了所有需求，您可以参考插件文档来获取详细信息。

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

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

3 个答案: