2017-04-11 1 views
2

ここで紛失してしまいます。FountainJs - app.jsとvendor.jsはどこに生成されるのですか

http://fountainjs.io/

Imは以下の構成を使用して、プロジェクトのために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にuglifiedされています。

私が使用するためのアイデアやガイドはありますか?私はそれがすべてこれを作る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

私のご理解のとおり、jsファイルをfolder2から除外したいとします。私もFountainJsといくつかの問題を抱えている

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

:そうするには

、あなたはこのようなものを使用することができ、フィルタでそのパスを除外する必要があります。私はプロジェクトがすでにほとんど完了していた時にそれを使い始めたので、ビルドシステムをプロジェクトに合わせるためにいくつかの妥協をしなければなりませんでした。

今、buildタスクでも、ファイルが作成されず、ファイルがapp.jsになりません。どのファイルがパイプを通過するかは、gulp-debugを使用して確認してください。

0

ビルドスクリプトではgulp-userefを使用して、に挿入されたスクリプトとスタイルをgulp-injectに連結します。プラグインの両方が特別なコメントを検索し、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にコメントに記載されているので、あなたは、詳細情報を取得するためのプラグインのマニュアルをREFEREことができます。

また、長い時間前にフォークしていたAngular-Gulp-Boilerplateを見て、生産プロジェクトで使用されているため、依存関係を最新の状態に保ち、新しい機能を導入することができます。

関連する問題