パスパラメータ（コマンドラインではなく）

Question

EDIT:私はタイトルに、最初から書いたように、これはない程度のコマンドラインはパラメータので、重複しないです。

//EDIT Iは一意に設計されたページ（PAGE_1、page_2など）不特定多数の、それぞれが独自のsass/pages/page_1/page_1.scssファイルとサスを設定しています。

これらのページはすべて同じWebサイトに属し、各ページのSassファイル@importは、sass/includesフォルダの同じファイルセットです。 sass/**/*を見て、基本的な一気タスクと

、すべてのページのスタイルはいつでも私は任意のページのスタイルに変更を加えるコンパイルさ。明らかに、これはうまく拡張できません。

私はgulp-watchを使ってみましたが、付属の.scssファイルのいずれかに変更が加えられても、それは捉えられません。実際にコンパイルされたファイルに加えられた変更をキャッチするだけで、同等の.cssになります。

私のgulpfileをDRYできるようにするには、gulpfile.jsにフォルダ名の基本的な配列を維持して、それぞれをループして個別に監視することがベストな解決策でした。それぞれのフォルダに対して同じSassコンパイルタスク。その後

var pageFolderNames = [ 
    'page_1', 
    'page_2' 
    // etc 
]; 

一気タスクのために、私が持っている：

gulp.task('watch_pages', function() 
{  
    // Get array length 
    var numPages = pageFolderNames.length; 

    // Add a new watch task for each individual page 
    for (var i = 0; i < numPages; i++) 
    { 
    gulp.watch('sass/pages/' + pageFolderNames[i] + '/**/*.scss', ['sass_page']); 
    } 
}); 

コンパイル（簡体字）タスクSASS：

// Task: Compile page-specific Sass 
gulp.task('sass_page', function() 
{ 
    return gulp.src('sass/pages/' + pageFolderNames[i] +'/**/*.scss') 
    .pipe(plumber(plumberErrorHandler)) 
    .pipe(sass(...)) 
    .pipe(gulp.dest('css/pages/' + pageFolderNames[i])); 
}); 

このアプローチ（私はJS-FUがweaksauce知っています）はエラーになります。

'sass_page' errored after 71 μs 
ReferenceError: i is not defined 

Isこのような作業をするために、iのようなパラメータを渡す方法はありますか？あるいは、私がやろうとしていることを達成するためのよりよい方法がありますか？私には卑劣な疑惑がある。 ：/

Answer 1

gulp watchの変更イベントがあります。

var pagesDir = 'sass/pages/'; 

gulp.task('watch_pages', function() { 
    gulp.watch(pagesDir + '**/*') 
     .on("change", function(file) { 
      // absolute path to folder that needs watching 
      var changedDest = path.join(__dirname, pagesDir); 
      // relative path to changed file 
      var changedFile = path.relative(changedDest, file.path); 
      // split the relative path, get the specific folder with changes 
      var pageFolder = changedFile.split('\\')[0]; 

      gulp.src(path.join(pagesDir, pageFolder) +'/**/*.scss') 
       .pipe(plumber(plumberErrorHandler)) 
       .pipe(sass(...)) 
       .pipe(gulp.dest('css/pages/' + pageFolder)); 

      console.log(changedDest); 
      console.log(changedFile); 
      console.log(pageFolder); 
     }); 
}); 

また、この方法では、フォルダの変数を宣言する必要はありません。これはあなたが探しているものかもしれません。監視されているパス内にディレクトリを追加すると、そのディレクトリを取得し、それに応じて宛先フォルダの名前を付けます。

sassをコンパイルするための理論的なタスクは、watchタスク内で機能するはずです。私はその道を歩いて遊んだ。何が起こったのか教えてください。必要に応じて修正することができます。

必要なパッケージ：

var gulp = require("gulp"), 
    path = require("path"), 
    rimraf = require("rimraf"); 

はところで、あなたはすでにファイルパスへのアクセス権を持っているので、あなたはおそらく全体ではなく、ディレクトリの特定のSCSSファイルをターゲットにすることができます。