2017-03-22 22 views
2

gulpに関する問題があります。私は、ソースとスタイルがどのように1つのファイルにコンパイルされるかを自動化することにしました。そのためにgulpを使用することにしました。ただし、私が作成しているapplication.jsファイルを、プロジェクト内のすべてのファイル.jsから上書きする必要はありません。奇妙なことは、プロジェクト内のすべての.lessファイルから生成された、コンパイル済みのcssファイルを実際に上書きすることです。ここ は私のプロジェクトファイル構造がどのように見えるかです:Gulpがコピー先ファイルを上書きしていません

var gulp = require("gulp"); 
var gulpif = require("gulp-if"); 
var concat = require("gulp-concat"); 
var uglify = require("gulp-uglify"); 
var less = require("gulp-less"); 
var cleanCSS = require("gulp-clean-css"); 

// application components and paths: 
var compileMinify = false; 
var basePath = process.cwd() + "apps/base"; 
var webPath = process.cwd() + "apps/services"; 
var compilationPath = "compilation"; 
var appCompiledFileName = "application"; 
var stylePaths = [ 
    basePath + "/styles/**/*.less", 
    webPath + "/styles/**/*.less" 
]; 
var sourcePaths = [ 
    basePath + "/**/*.js", 
    webPath + "/**/*.js" 
]; 

gulp.task("services-source", function() { 
    return gulp.src(sourcePaths) 
     .pipe(concat(appCompiledFileName + ".js")) 
     .pipe(gulpif(compileMinify, uglify())) 
     .pipe(gulp.dest(compilationPath, { cwd: webPath })); 
}); 
gulp.task("services-styles", function() { 
    return gulp.src(stylePaths) 
     .pipe(concat(appCompiledFileName + ".less")) 
     .pipe(less()) 
     .pipe(gulpif(compileMinify, cleanCSS({ debug: true }, function(details) { 
      console.log(details.name + " original size: " + details.stats.originalSize); 
      console.log(details.name + " minified size: " + details.stats.minifiedSize); 
     }))) 
     .pipe(gulp.dest(compilationPath, { cwd: webPath })); 
}); 
gulp.task("services", [ "services-source", "services-styles" ], function() { 
    gulp.watch(sourcePaths, [ "services-source" ]); 
    gulp.watch(stylePaths, [ "services-styles" ]); 
}); 

あなたが見ることができるように、ゴクゴクタスクservices-sourceは、各.jsファイルを通過している:ここで

. 
├── gulpfile.js 
└── apps 
    ├── base 
     ├── controllers 
      ├── controllerBaseOne.js 
      └── controllerBaseTwo.js 
     ├── directives 
      ├── directiveBaseOne.js 
      └── directiveBaseTwo.js 
     ├── services 
      └── serviceBaseOne.js 
     └── styles 
      └── styleBase.less 
     ├── header.html 
     └── index.html 
    ├── services 
     ├── compilation 
      ├── application.js 
      └── application.css 
     ├── controllers 
      ├── controllerServicesOne.js 
      ├── controllerServicesTwo.js 
      └── controllerServicesThree.js 
     ├── directives 
      ├── directiveServicesOne.js 
      ├── directiveServicesTwo.js 
      └── directiveServicesThree.js 
     ├── services 
      ├── serviceServicesOne.js 
      └── serviceServicesTwo.js 
     └── styles 
      ├── styleServicesOne.less 
      ├── styleServicesTwo.less 
      └── styleServicesThree.less 
     ├── header.html 
     └── index.html 
    ├── appMain.js 
    └── config.json 

は私gulpfile.jsが今どのように見えるかですappsフォルダとサブフォルダを作成し、すべてを連結してcompilationフォルダに入れる単一のファイルにします。 services-stylesタスクでも同じことが行われますが、変換は少ししか行われません。スタイルとソースの両方を縮小するチェックもありますが、現在はデフォルトでは無効になっています。

services-sourceタスクの最後に、遵守したファイルの宛先を上書きするパラメータ:overwrite: trueに追加しようとしましたが、何も起こっていないようです。 を実行すると、毎回application.jsのサイズが大きくなり、何とか上書きされません。

問題の原因となる可能性のあるアドバイスはありますか?

答えて

1

毎回タスクを開始すると、application.jsファイルがsrcに含まれているようです。

gulp-debugなどのプラグインを使用して、ストリーム内の現在のファイルをログアウトして確認することができます。それが原因だ場合(See this answer for that)

あなたが明示的に除外することができます。

var sourcePaths = [ 
    "!path/to/application.js", 
    basePath + "/**/*.js", 
    webPath + "/**/*.js" 
]; 
+0

あなたの男は、ちょうど私の命を救いました!私は3時間かけて何が問題になるのだろうと思っていました。それは何だったのでしょうか? 'compilation'フォルダも毎回タスクに含まれていました...これを' sourcePaths'配列にも追加しました: '"! " + webPath + "/" + compilationPath + "/ **/*。js" ' ありがとうございます! :) – yep4u

関連する問題