javascript - Gulp - 使用自定义文件夹构建文件

Question

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

folder/
    templates/
        template-001.html
        image-001.jpg
    images/
        image-default.jpg
    src/
        style.scss

我正在使用 gulp-inline-css 获取编译的 css 文件，并将所有内联样式插入到文件 template-001.html 中。然后，任务获取所有这些文件并将其放入 build 文件夹中。像这样:

folder/
    templates/
        template-001.html
        image-001.jpg
    images/
        image-default.jpg
    src/
        style.scss
    build/
        template-001.html
        image-default.jpg
        image-001.jpg

这对于单个项目来说是可以的。但我希望能够构建多个模板并以正确的方式组织文件。我想要一个像这样的文件夹结构:

folder/
    templates/
        template-001/
            template-001.html
            image-001.jpg
    images/
        image-default.jpg
    src/
        style.scss
    build/
        template-001/
            template-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'] );

});

关于热点的任何提示或建议可以使之成为可能？谢谢!

Answer 1

那么，您想将模板文件夹中的所有非 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 文件应该已经就位。您是否还需要帮助复制 images 中的文件？

更新

我修改了 images 任务。请阅读评论以了解发生了什么:

var fs = require('fs');
gulp.task('images', function(done) {
    // get all the directories inside templates. this will return
    // an array of folders
    var templates = fs.readdirSync('templates').filter(function(el) {
        return fs.statSync('templates/' + el).isDirectory()
    });

    // we start our stream with all the files from images we want to have
    var stream = gulp.src( 'images/**/*' )
        .pipe(plumber())
        .pipe(imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }));

    // now we add a destination dir for each one of our
    // templates
    templates.forEach(function(el) {
        stream.pipe(gulp.dest('templates/' + el));
    });

    // we add the rest of our pipes
    stream.pipe(notify({
        title: projectTitle,
        message: 'Image: <%= file.relative %> was optimized!'
    }));

    // returning the stream kicks it off
    return stream;
});