1

我是前端新手，这是我现在尝试使用的第一个问题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

我想用gulp-usemin这样的方式制作 dist 文件夹：

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

0 回答 0