2017-04-11 44 views
2

我有點不知所措。FountainJs - app.js和vendor.js在哪裏生成

http://fountainjs.io/

進出口使用的一個項目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')))); 
} 

回答

0

根據我對你的問題的理解,你想從folder2排除js文件。

要做到這一點,你應該排除在過濾器的路徑,你可以使用這樣的事情:

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

我也有一些問題FountainJs。當項目已經基本完成時,我開始使用它,所以我必須做出一些妥協才能使構建系統適合項目。

現在的build任務甚至不創建和app.js文件。您可以嘗試使用gulp-debug來查看哪些文件通過管道傳遞。

0

構建腳本利用gulp-useref連接使用gulp-inject注入index.html的腳本和樣式。這兩個插件搜索特殊的註釋,gulp-inject使用:

  • <!-- bower:css -->
  • <!-- inject:css -->
  • <!-- bower:js -->
  • <!-- inject:js -->
  • <!-- inject:partials -->

gulp-useref使用:

  • <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
  • <!-- build:css({.tmp/serve,src}) styles/app.css -->
  • <!-- build:js(src) scripts/vendor.js -->
  • <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->

所以一切都需要在評論中index.html提到的,你可以參考,以插件的文件以獲得詳細信息。

此外,你可以看看我長時間分叉的Angular-Gulp-Boilerplate,並保持最新的依賴關係並引入新的功能,因爲它在生產項目中使用。

相關問題