我正在创建一个工作流以构建自定义电子邮件模板。在我的文件夹中,我具有以下结构:
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'] );
});
任何有关热的技巧或建议使之成为可能?谢谢!
最佳答案
因此,您要将所有不是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;
});