Gulp - 处理多个主题和文件夹 [英] Gulp - Handling multiple themes and folders
问题描述
我正在尝试创建一个我们可以在我们的一个大网站上使用的终极 gulpfile （根据您所在网站的部分，其中一个拥有多个主题） 。我试图让它只运行它需要运行的进程，而不是重新编译所有东西。
让我准确地布置我想要实现的内容：
p>文件夹结构
src /
master-theme /
css /
style.scss
偏分数/
_a.scss
_b.scss
img /
a.jpg
b .jpg
子主题/
css /
style.scss
偏分数/
_c.scss
_d.scss
img /
c.png
d.jpg b
我想要这些文件被压缩/编译并且以具有相同文件夹结构的目标文件夹结束（用 dest替换在你的脑海里） src > dest
问题
目前我可以做到我想要的 - 但gulpfi le编译和压缩所有内容。例如。如果我将图像添加到子主题/ img ，它将运行所有主题的图像压缩。我正在使用 gulp-changed ，但它仍然意味着它正在查看网站上的所有图片。
对于sass也是一样 - 如果我更新 _c.scss ，但主CSS和子主题CSS得到编译，显然是不需要的。
当前解决方案
目前我还没有一个。现在我正在使用 gulp-file-tree 来生成文件夹结构的json文件，然后每当文件发生更改时，使用函数循环访问
（我知道这很可怕 - 但是目前可行的解决方案）
var tree = require（'./ build / tree。 JSON'）;
var children = tree.children;
for（var i = children.length - 1; i> = 0; i--）{
var child = children [i];
if（child.isDirectory）
task（child）
}
其中任务（）是传入的大量任务（例如Sass编译）
文件夹结构不适合讨论 - 我不希望这变成一个'结构不同的文件'的东西。还有其他几个因素与这个问题无关，因为我们为什么这么做（对不起，我必须这样说...）
我打开试图做任何事情，因为我已经盯着这个文件好几天了。我试图运行的任务是：
- Sass编译
- 雪碧生成
- SVG雪碧至PNG雪碧
- 图像压缩
- Javascript压缩
预先感谢您的帮助。如果找到了解决方案，我会写一篇关于它的适当的文章，以便其他人不会感到我的痛苦...
<
gulpfile.js：
$ b我已经做了几乎相同的事情，我想我已经完成了它。 $ b
var gulp = require（'gulp'），
debug = require（'gulp-debug'），
merge = require（'merge-流'），
sass = require（'gulp-sass'），
less = require（'gulp-less'），
changed = require（'gulp-changed'），
imagemin = require（'gulp-imagemin'），
prefix = require（'gulp-autoprefixer'），
minifyCSS = require（'gulp-minify-css'），
browserSync = require（'browser-sync'），
reload = browserSync.reload，
path = require（'path'），
glob = require（'glob'）;
//将错误记录到控制台
函数errorHandler（error）{
console.log（error.toString（））;
this.emit（'end'）;
}
函数processThemeFolder（src）{
function debugTheme（type）{
return debug（{title：'theme'+ theme +''+ type} ）;
}
var theme = path.basename（src）;
var dest ='public / themes /'+ theme;
return merge（
gulp
.src（[src +'/sass/**/*.scss']）
.pipe（changed（dest + '/ css'，{extension：'.css'}））
.pipe（debugTheme（'sass'））
.pipe（sass（））
.pipe（minifyCSS（） ）
.pipe（gulp.dest（dest +'/ css'）），
gulp
.src（[src +'/less/**/*.less']）
.pipe（更改（dest +'/ css'，{extension：'.css'}））
.pipe（debugTheme（'less'））
.pipe（less（））
.pipe（minifyCSS（））
.pipe（gulp.dest（dest +'/ css'）），
gulp
.src（[src +'/ js / （debugTheme（'js'））
.pipe（uglify（）* / *。js']）
.pipe（changed（dest +'/ js'））
.pipe ）
.gipe（[src +'/img/**/*.{png,jpg， gif}']）
（更改（dest +'/ img'））
.pipe（debugTheme（'img'））
.pipe（imagemin（））
.pipe（gulp.dest（dest +'/ img'））
）.on（'change'，reload）;
$ b $ gulp.task（'themes'，function（）{
var srcThemes = glob.sync（'resources / themes / *'）;
return合并（srcThemes.map（processThemeFolder））;
}）;
// ...
这里的关键是使用 gulp-changed 只能通过已更改的文件。其余的都在顶级。
编译流都显示调试行，详细说明哪些文件将进入流。在流的变化中，
将通知browserSync使用流（如果可能）重新加载浏览器。主题任务只有完成
所有编辑流完成后才会完成，并且只有完成所有主题后，才会将总体主题任务标记为已完成。
主题的源文件存储在resources / themes / themename中，并将其输出写入public / themes / themename。
这对我来说非常好，因人而异。 ： - ）
I am trying to create an ultimate gulpfile that we can use on one of our big sites (one with multiple themes depending on the section of the site you are in). I'm trying to get it to only run the process it needs to run and not recompile everything.
Let me layout exactly what i'm trying to achieve:
Folder Structure
src/
master-theme/
css/
style.scss
partials/
_a.scss
_b.scss
img/
a.jpg
b.jpg
sub-theme/
css/
style.scss
partials/
_c.scss
_d.scss
img/
c.png
d.jpg
I want these files to be compressed/compiled and to end up in the destination folder with the same folder structure (just replace src with dest in your mind)
The Problem
At the moment i can get it to do what I want - but the gulpfile compiles and compresses everything. E.g. if I add an image tosub-theme/img it will run the image compression for all the "themes". I am using gulp-changed but it still means that it is looking at all the images accross the site.
The same is also for the sass - if I update _c.scss, but the master css and the sub-theme css get compiled which is obviously not desired.
Current Solution
I don't really have one at the moment. Right now I am using gulp-file-tree to generate a json file of the folder structure, then whenever a file is changed, looping through that
with a function (which I know is horrible - but a solution which currently works)
var tree = require('./build/tree.json');
var children = tree.children;
for (var i = children.length - 1; i >= 0; i--) {
var child = children[i];
if(child.isDirectory)
task(child)
}
There task() is a gulp tasks passed in (e.g. Sass compilation)
The folder structure is not up for discussion - I don't want this to turn into a 'structure your files differently' kind of thing. There are several other factors involved which are not related to this issue as to why we are this way (Sorry I had to say that...)
I'm open to trying anything as i've stared at this file for days now.The tasks I am trying to run are:
- Sass compilation
- Sprite generation
- SVG sprite to PNG sprite
- Image compression
- Javascript compression
Thanks in advance for your help. If a solution is found, I'll write a proper post about it so that others will hopefully not feel my pain...
I'm doing pretty much the same thing, and I think I've nailed it.
gulpfile.js:
var gulp = require('gulp'),
debug = require('gulp-debug'),
merge = require('merge-stream'),
sass = require('gulp-sass'),
less = require('gulp-less'),
changed = require('gulp-changed'),
imagemin = require('gulp-imagemin'),
prefix = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
path = require('path'),
glob = require('glob');
// Log errors to the console
function errorHandler(error) {
console.log(error.toString());
this.emit('end');
}
function processThemeFolder(src) {
function debugTheme(type) {
return debug({ title: 'theme ' + theme + ' ' + type});
}
var theme = path.basename(src);
var dest = 'public/themes/' + theme;
return merge(
gulp
.src([src + '/sass/**/*.scss'])
.pipe(changed(dest + '/css', { extension: '.css' }))
.pipe(debugTheme('sass'))
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest(dest + '/css')),
gulp
.src([src + '/less/**/*.less'])
.pipe(changed(dest + '/css', { extension: '.css' }))
.pipe(debugTheme('less'))
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest(dest + '/css')),
gulp
.src([src + '/js/**/*.js'])
.pipe(changed(dest + '/js'))
.pipe(debugTheme('js'))
.pipe(uglify())
.pipe(gulp.dest(dest + '/js')),
gulp
.src([src + '/img/**/*.{png,jpg,gif}'])
.pipe(changed(dest + '/img'))
.pipe(debugTheme('img'))
.pipe(imagemin())
.pipe(gulp.dest(dest + '/img'))
).on('change', reload);
}
gulp.task('themes', function() {
var srcThemes = glob.sync('resources/themes/*');
return merge(srcThemes.map(processThemeFolder));
});
// ...
The key here is to use gulp-changed to only pass through the changed files. The rest is cream on top.
The compilation streams all show a debug line detailing what files are going into the stream. On a change in the stream, the browserSync is notified to reload the browsers, using streaming (if possible). The theme task is only completed once all its compilation streams are done, and the over-all themes task will only be marked as done when all the themes are done.
The theme's source files are stored in resources/themes/themename, and writes its output to public/themes/themename.
This is working very well for me, YMMV. :-)
这篇关于Gulp - 处理多个主题和文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
