将参数传递给gulpfile.js中的Gulp任务(不是命令行) [英] Pass parameter to Gulp task in gulpfile.js (not command-line)

问题描述

正如我在标题和开头所写的那样，这与命令行参数无关，因此不是重复的. //EDIT

As I wrote IN THE TITLE AND FROM THE BEGINNING, this is not about command-line parameters and is thus NOT A DUPLICATE. //EDIT

我有一个Sass设置，其中包含不确定数量的独特设计的页面(page_1，page_2等)，每个页面都有自己的sass/pages/page_1/page_1.scss文件.

I have a Sass setup with an indefinite number of uniquely-designed pages (page_1, page_2, etc), each having their own sass/pages/page_1/page_1.scss file.

所有页面都属于同一个网站，并且每个页面的sass文件@import是sass/includes文件夹中的同一组文件.

The pages all belong to the same website, and each page's sass file @imports the same set of files from a sass/includes folder.

有了一个基本的gulp任务监视sass/**/*，只要我更改 any 页面的样式，就可以编译每个页面的样式.显然，这不能很好地扩展.

With a basic gulp task watching sass/**/*, every page's styles get compiled anytime I make a change to any page's styles. Obviously this doesn't scale well.

我尝试使用gulp-watch，但是如果对包含的.scss文件之一进行了更改，它不会捕获.它仅捕获对实际编译为等效.css的文件所做的更改.

I tried using gulp-watch, but it doesn't catch if changes are made to one of the included .scss files. It only catches changes made to the files that actually get compiled into an equivalent .css.

为了使我的gulpfile尽可能干燥，我能想到的最佳解决方案是在gulpfile.js中维护文件夹名称的基本数组，并使用每个文件夹都执行相同的sass编译任务.

For the purposes of having my gulpfile be as DRY as possible, the best solution I could come up with was to maintain a basic array of folder names in gulpfile.js, and to loop through and watch each of them separately, using the same sass-compiling task for each folder.

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

然后执行gulp任务，我有:

Then for the gulp task, I have:

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的任务:

The (simplified) task that compiles 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是弱酱)会导致错误:

This approach (I know my JS-fu is weaksauce) results in an error:

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

是否有任何方法可以将诸如i之类的参数传递给任务，以使其正常工作?或者，是否有更好的方法来完成我想做的事情?我有一个偷偷摸摸的怀疑. :-/

Is there any way to pass parameters, such as i, to gulp tasks to get this working? Alternately, is there a better way to accomplish what I'm trying to do? I have a sneaking suspicion there is. :-/

推荐答案

我发现有一个gulp watch的on change事件.所以这可能就是您要寻找的东西:

I found out there is an on change event for gulp watch. So this might be what you're looking for:

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);
        });
});

此外，您无需声明文件夹变量.如果您在要监视的路径中添加目录，它应该将其选中并相应地命名目标文件夹.

Also, this way you don't need to declare the folder variables. If you add directories within the path being watched, it should pick it up and name the destination folder accordingly.

理论上，编译sass的gulp任务应在watch任务内工作.我在小径上玩耍，似乎把它们吐出来了.让我知道会发生什么，如有必要，我可以进行修改.

Theoretically the gulp task to compile sass should work within the watch task. I played around with the paths, and it seems to spitting them out. Let me know what happens, I can modify if necessary.

所需的软件包:

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

顺便说一句，由于您已经可以访问文件路径，因此也许可以将特定的scss文件而不是整个目录作为目标.

BTW, since you already have access to the file path, you can perhaps target the specific scss file instead of the whole directory.

这篇关于将参数传递给gulpfile.js中的Gulp任务(不是命令行)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！