Сделать index.html для каждой отдельной папки с помощью gulp-usemin
Я Front-end Newbi, и это мой первый вопрос, который я сейчас пытаюсь использовать. gulp-usemin
,
Я понятия не имею как сделать index.html
в каждый каталог.
Это мой текущий каталог:
|
+- CLM
| +- TestFoder1
| +-css
| +-styles.css
| +-js
| +-script.js
| +-index.html
| +- TestFoder2
| +-css
| +-styles.css
| +-js
| +-script.js
| +-index.html
+-gulpfile.js
+-package.json
И я хочу сделать dist папку с gulp-usemin
как это:
|
+- dist
| +- TestFoder1
| +-css
| +-styles.css
| +-js
| +-index.html
| +- TestFoder2
| +-css
| +-styles.css
| +-js
| +-index.html
Но я не могу сделать это. Только один .html
файл вышел. Я понятия не имею, чтобы сделать.
А это мой code
:
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
del = require('del'),
usemin = require('gulp-usemin'),
rev = require('gulp-rev'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create();
var slide = ['TestFolder1', 'TestFolder2', 'TestFolder3'];
var presentationName = 'CLM';
gulp.task('deleteDistFolder', function() {
return del('./dist');
});
gulp.task('optimizeImages', function() {
for (let i = 0; i < slide.length; i++) {
gulp
.src('./' + presentationName + '/' + slide[i] + '/images/*')
.pipe(
imagemin({
progressive: true,
interlaced: true,
multipass: true,
})
)
.pipe(gulp.dest('./dist/' + slide[i] + '/images'));
}
});
gulp.task('usemin', ['deleteDistFolder'], function() {
for (var i = 0; i < slide.length; i++) {
gulp
.src('./' + presentationName + '/' + slide[i] + '/*.html')
.pipe(usemin({
css: [function() {return rev()}, function() {return cssnano()}],
js: [function() {return rev()}, function() {return uglify()}]
}))
.pipe(gulp.dest("./dist"));
}
});
gulp.task('build', ['deleteDistFolder', 'optimizeImages', 'usemin']);