I'm Front-end Newbi and This is my First Question
I'm now try to Using gulp-usemin
.
I have no idea how to make index.html
to each directory.
This is my current directory :
|
+- CLM
| +- TestFoder1
| +-css
| +-styles.css
| +-js
| +-script.js
| +-index.html
| +- TestFoder2
| +-css
| +-styles.css
| +-js
| +-script.js
| +-index.html
+-gulpfile.js
+-package.json
And I want to make dist folder with gulp-usemin
like this :
|
+- dist
| +- TestFoder1
| +-css
| +-styles.css
| +-js
| +-index.html
| +- TestFoder2
| +-css
| +-styles.css
| +-js
| +-index.html
But I cannot possible to make this. Just only one .html
file is come out. I have no idea to do.
And this is my 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']);