make index.html to each single folder with using gulp-usemin

220 Views Asked by At

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']);
0

There are 0 best solutions below