Javascript Gulp-使用自定义文件夹生成文件

我正在创建一个工作流来构建自定义电子邮件模板。在我的文件夹中，我有以下结构：

文件夹/
模板/
模板-001.html
image-001.jpg
图像/
image-default.jpg
src/
style.scss

我正在使用

gulpinlinecss

获取编译css文件，并在文件

template-001.html

中插入所有内联样式。然后，任务获取所有这些文件并将其放入

build

文件夹中。像这样：

文件夹/
模板/
模板-001.html
image-001.jpg
图像/
image-default.jpg
src/
style.scss
建造/
模板-001.html
image-default.jpg
image-001.jpg

这对于单个项目来说是可以的。但我希望能够构建几个模板，并以正确的方式组织文件。我希望有这样的文件夹结构：

文件夹/
模板/
模板-001/
模板-001.html
image-001.jpg
图像/
image-default.jpg
src/
style.scss
建造/
模板-001/
模板-001.html
image-default.jpg
image-001.jpg

换句话说，我希望能够获得

template-001.html

文件夹，并在

build

文件夹中复制它。以我目前的设置，我不知道如何使之成为可能

这是我的

gulpfile.js

：

var gulp = require( 'gulp' ),
        sass = require( 'gulp-sass' ),
        autoprefixer = require( 'gulp-autoprefixer' ),
        minifycss = require( 'gulp-minify-css' ),
        imagemin = require( 'gulp-imagemin' ),
        rename = require( 'gulp-rename' ),
        concat = require( 'gulp-concat' ),
        plumber = require( 'gulp-plumber' ),
        notify = require( 'gulp-notify' ),
        inlineCss = require('gulp-inline-css'),
        projectTitle = 'E-mail Templates';

// styles task
gulp.task( 'styles', function() {
    return gulp.src( 'src/*.scss' )
        .pipe( plumber() )
        .pipe( sass({ paths: ['src/'] }) )
        .pipe( notify( {
        title: projectTitle,
        message: 'File: <%= file.relative %> was compiled!'
        } ) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'src/' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Minified file: <%= file.relative %> was created / updated!'
        } ) )

        console.log( '<%= file %>' );
} );

// styles task
gulp.task( 'html-build', function() {
    return gulp.src( 'templates/**/*.html' )
        .pipe( inlineCss({
                applyStyleTags: false,
                applyLinkTags: true,
                removeStyleTags: false,
                removeLinkTags: true
        }) )
        .pipe( gulp.dest('build/') )
        .pipe( notify( {
        title: projectTitle,
        message: 'Template File: <%= file.relative %> was created / updated!'
        } ) )
} );

// images task
gulp.task( 'images', function() {
    return gulp.src( 'images/**/*' )
        .pipe( plumber() )
        .pipe( imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }) )
        .pipe( gulp.dest( 'build/' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Image: <%= file.relative %> was optimized!'
        } ) )
} );

// watch task
gulp.task( 'watch', [ 'styles' ], function() {

    // Watch .scss files
    gulp.watch( 'src/**/*.scss', [ 'styles', 'html-build' ] );

    // Watch .html files
    gulp.watch( 'templates/**/*.html', [ 'html-build' ] );

    // Watch image files
    gulp.watch('images/**/*', ['images'] );

});

var gulp=require（'gulp'），
sass=需要（'gulp sass'），
autoprefixer=require（'gulp autoprefixer'），
minifycss=require（'gulp minify css'），
imagemin=需要（‘吞咽imagemin’），
rename=require（'gulp rename'），
concat=require（'gulpconcat'），
管道工=需要（‘大口管道工’），
notify=需要（'gulp notify'），
inlineCss=require（'gulp-inline-css'），
projectTitle='电子邮件模板'；
//样式任务
任务（'styles'，function（））{
返回gulp.src（'src/*.scss'）
.管子（管道工（））
.pipe（sass（{path:['src/']}））
.管道（通知（{
标题：projectTitle，
消息：“文件：已编译！”
} ) )
.pipe（autoprefixer（'last 2 version'、'safari 5'、'ie 8'、'ie 9'、'opera 12.1'、'ios 6'、'android 4'））
.pipe（大口目的地（'src/'））
.管道（通知（{
标题：projectTitle，
消息：“缩小的文件：已创建/更新！”
} ) )
控制台日志（“”）；
} );
//样式任务
gulp.task（'html build'，function（））{
返回gulp.src（'templates/***.html'）
.管道（内部）({
applyStyleTags:false，
applyLinkTags:true，
removeStyleTags:false，
removeLinkTags：true
}) )
.pipe（gulp.dest（'build/'））
.管道（通知（{
标题：projectTitle，
消息：“模板文件：已创建/更新！”
} ) )
} );
//图像任务
任务（'images'，function（））{
return gulp.src（'images/***'）
.管子（管道工（））
.pipe（imagemin（{optimizationLevel:7，progressive:true，interlaced:true}））
.pipe（gulp.dest（'build/'））
.管道（通知（{
标题：projectTitle，
消息：“图像：已优化！”
} ) )
} );
//监视任务
gulp.task（'watch'，['style']，function（））{
//监视.scss文件
gulp.watch（'src/***.scss'，['styles'，'html build']）；
//查看.html文件
gulp.watch（'templates/***.html'，['html build']）；
//观看图像文件
大口喝手表（'images/***'，['images']）；
});

---

有没有关于hot的提示或建议？谢谢

那么，您想将模板文件夹中非HTML的所有文件复制到dest文件夹吗

gulp.task('copy', function() {
    return gulp.src(['templates/**/*','!templates/**/*.html'])
        .pipe(gulp.dest('build'));
});

这将需要：

folder/
  templates/
    template-001/
      template-001.html
      image-001.jpg
    template-002/
      template-002.html
      image-002.jpg
    template-003/
      template-003.html
      image-003.jpg

并创建以下内容：

folder/
  build/
    template-001/
      image-001.jpg
    template-002/
      image-002.jpg
    template-003/
      image-003.jpg

这应该可以实现这个技巧，并与您的其他任务配合使用。当我正确解释了Gulpfile时，HTML文件应该已经就位了。在复制

图像中的文件时是否还需要帮助

更新
我重新编写了
图像
任务。请阅读评论以了解情况：

var fs=require（'fs'）；
吞咽任务（“图像”，功能（完成）{
//获取模板中的所有目录。这将返回
//文件夹数组
var templates=fs.readdirSync（'templates'）.filter（函数（el）{
返回fs.statSync（'templates/'+el）.isDirectory（）
});
//我们从我们想要的图像中的所有文件开始我们的流
var stream=gulp.src（'images/***'）
.管子（管道工（））
.pipe（imagemin（{optimizationLevel:7，progressive:true，interlaced:true}））；
//现在，我们为我们的每个应用程序添加一个目的地目录
//模板
templates.forEach（函数（el）{
溪流管道（大口目的地（‘模板/’+el））；
});
//我们加上其余的管子
管道（通知）({
标题：projectTitle，
消息：“图像：已优化！”
}));
//返回流启动它
回流；
});
嘿，@ddprrt！谢谢你的提示！我要做的是复制文件夹
templates\template-001
中的所有文件，在
build文件夹
中创建文件夹
template-001
，并“粘贴”此创建文件夹中的所有复制文件。我的主要问题是如何在
templates
文件夹中获取文件夹名
template-001
，并在
build
文件夹中创建一个同名（
template-001
）的新文件夹。这样，我就可以通过
build
中的文件夹来分隔模板。有关于如何获取文件夹名称的提示吗？您真的需要文件夹名称吗？使用上面的代码生成文件夹+将文件复制到itHey，@ddprrt！对不起，我应该先检查一下！它的工作，因为我需要在每个文件夹内的图像。我需要html文件