`gulp-usemin` 使用手册

gulp-usemin 使用手册

gulp-usemin 项目地址: https://gitcode.com/gh_mirrors/gu/gulp-usemin

一、项目目录结构及介绍

gulp-usemin 是一个专为 Gulp 设计的任务处理器，用于优化前端资源引用，如替换 HTML 中未优化的脚本和样式表引用。尽管具体项目的目录结构可能会因使用者的定制而异，基于其源码仓库我们可以推断基础的项目布局：

• 根目录：

  • LICENSE: 许可证文件。
  • README.md: 项目简介和使用指南。
  • gulpfile.js: 主要的Gulp任务定义文件。
  • .gitignore: Git忽略文件列表。
  • travis.yml: Travis CI 的配置文件（自动化测试）。
  • package.json: 包含项目元数据和依赖项。

• src: 开发源代码存放地，通常包含HTML、CSS、JavaScript等原始文件。

  • 示例中没有直接展示，但通常会有如 src/index.html, src/css/*.css, src/js/*.js 等结构。

• build: 构建后输出的目标目录，优化后的文件会被放置于此。

请注意，实际应用时，开发者可以根据需求调整这些目录结构。

二、项目的启动文件介绍

在 gulp-usemin 的上下文中，启动文件主要是指 gulpfile.js。这是一个Node.js脚本，用来定义Gulp任务。通过这个文件，你可以设置和执行自定义的构建流程。以下是一个简单的示例片段：

// 引入必要的Gulp插件
var usemin = require('gulp-usemin');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var cleanCss = require('gulp-clean-css');
var rev = require('gulp-rev');

// 定义gulp-usemin任务
gulp.task('usemin', function() {
    return gulp.src('/**/*.html')
        .pipe(usemin({
            css: [rev()],
            html: [htmlmin({collapseWhitespace: true})],
            js: [uglify(), rev()],
            inlinejs: [uglify()],
            inlinecss: [cleanCss(), 'concat']
        }))
        .pipe(gulp.dest('build/'));
});

上述代码展示了如何使用 gulp-usemin 来处理HTML中的资源引用，对CSS进行压缩并添加版本号，同样对JS进行压缩和版本控制，并将处理后的文件输出到 build/ 目录。

三、项目的配置文件介绍

对于 gulp-usemin 来说，其核心配置是嵌入在 gulpfile.js 中的任务定义部分。然而，也可以通过在HTML文件中使用特殊的评论块（例如 <!-- build:css style.css --> 和 <!-- endbuild -->）来实现配置块，这样可以直接在模板中指定哪些资源需要被优化以及如何优化它们。此外，还可以通过传递选项给 usemin 函数来进一步细化工具有关的配置，例如 assetsDir, path, enableHtmlComment, 等。

总结而言，《gulp-usemin》的配置并不单独存在于一个特定的.config文件，而是通过结合Gulp任务定义和HTML中的指令完成，这种机制使得配置更为灵活且直接关联于实际的构建目标。

gulp-usemin 项目地址: https://gitcode.com/gh_mirrors/gu/gulp-usemin