有没有办法重写HTML以使用gulp-minified CSS

Question

我正在努力解决以下问题:

我的gulpfile.js编译所有.less,缩小它并将所有CSS连接到./dist/all.min.css

有没有办法可以重写HTML文件,删除所有样式标签,只加一个样式标签加载缩小的CSS？

Answer 1

处理此问题的最佳方法是使用其中一个HTML注入器.gulp-inject到目前为止,我已经取得了一些成功.

添加gulp-inject到您的项目:

npm i --save-dev gulp-inject

假设您有一个与此类似的文件夹布局:

• 建立/
• SRC /
  • 的index.html
  • 减/
    • main.less
  • JS /
    • app.js

你的HTML应该包含你想要注入CSS或JS文件的地方,要么是两者的头部,要么是CSS的头部,以及JS文件的正文之前:

<!-- inject:css -->
<!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> -->
<!-- endinject -->

<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<!-- endinject -->

然后你的gulpfile看起来像这样:

gulp.task('build-styles', function() {
    // the return is important!
    return gulp.src('src/less/main.less')
            .pipe(less())
            .pipe(gulp.dest('build'));
});


gulp.task('build-js', function() {
    // the return is important if you want proper dependencies!
    return gulp.src('src/js/**/*.js')
            // lint, process, whatever
            .pipe(gulp.dest('build'));
});

gulp.task('build-html', function() {
    // We src all files under build
    return gulp.src('build/**/*.*')
            // and inject them into the HTML
            .pipe(inject('src/index.html', {
                        addRootSlash: false,  // ensures proper relative paths
                        ignorePath: '/build/' // ensures proper relative paths
                    }))
            .pipe(gulp.dest('build'));
});

gulp.task('build', ['build-styles', 'build-js'], function(cb) {
    gulp.run('build-html', cb);
});

gulp.task('default', ['build'], function() {
    gulp.watch('src/**/*.less', function() {
        gulp.run('build-styles');
    });
    gulp.watch(['build/**/*.*','!build/index.html', 'src/index.html'], function() {
        gulp.run('build-html');
    });
});

这只是一个粗略的想法,您可以使用gulp-watch增量构建做更多的事情,但关键是我们观察构建目录以选择何时重建HTML文件,并观察src目录以获取其他所有内容.

注意:

由于这会得到很多赞成,因此还有一些其他插件可以参考替换gulp-inject.你可能想看看它们,看看它们中的一个是否更适合你,特别是如果你不使用它们gulp-rev:

• 一饮而尽,usemin
• 一饮而尽,useref

还有两个CDN库可以执行类似的操作,但是对于CDN资源

• 一饮而尽,谷歌-CDN
• gulp-cdnizer(完全披露:我写了这个)