有没有一种方法可以重写HTML来使用gulp-minified CSS [英] Is there a way to rewrite the HTML to use gulp-minified CSS

问题描述

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

有没有一种方法可以重写HTML文件，删除所有样式标签，并只将一个样式标签加载到缩小的CSS中？

解决方案

处理这个问题的最佳方法是使用一个HTML注入器。我现在使用 gulp-inject 取得了一些成功。

添加gulp-inject 到您的项目中：

  npm我--save-dev gulp-inject 
  

假设您的文件夹布局与此类似：

• 建立/


• src /
  
  
  
  • index.html
  
  
  • less /
    
    
    
    • main.less
    
    
  
  
  • js /
    
    
    
    • app.js
    
    
  
  

你的HTML应该包含你希望注入CSS或JS文件的位置，既可以是头部，也可以是CSS并且就在你的JS文件正文之前：
$ b

 <！ -  inject：css  - > 
<！ - 源文件中的任何* .css文件将在此处显示为：< link rel =stylesheethref =FILE> - > 
<！ -  endinject  - > 
 
<！ -  inject：js  - > 
<！ - 源代码中的任何* .js文件将以下列格式显示：< script src =FILE>< / script> - > 
<！ -  endinject  - > 
  

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

< pre-class =lang-js prettyprint-override> gulp.task（'build-styles'，function（）{
//返回值很重要！
返回gulp。 src（'src / less / main.less'）
.pipe（less（））
.pipe（gulp.dest（'build'））;
}）;


gulp.task（'build-js'，function（）{
//如果你想要适当的依赖关系，返回是很重要的！
return gulp.src （'src / js / ** / *。js'）
// lint，process，any
.pipe（gulp.dest（'build'））;
}）;

gulp.task（'build-html'，function（）{
//我们在构建
的所有文件中src返回gulp.src（'build / ** / * （'src / index.html'，{
addRootSlash：false，//确保正确的相对路径$ b。）''
//并将它们注入HTML
.pipe $ b ignorePath：'/ build /'//确保正确的相对路径
}））
.pipe（gulp.dest（'build'））;
}）;
$ b $ 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 用于增量构建，但这里的关键是我们要观察 build 目录来选择何时重建HTML文件，并观察 src

注意：

很多upvotes，还有一些其他插件可以在 gulp-inject 之外进行引用替换。你可能想看看他们，看看他们中的一个是否适合你，特别是如果你不使用 gulp-rev ：

• gulp-usemin


• gulp-useref

另外还有两个CDN库可以做类似的事情，但是对于CDN资源而言，

• gulp-google-cdn


• gulp-cdnizer （完全披露：我写了这个）
  
  $ /
  

  I'm struggling with the following:

  My gulpfile.js compiles all .less, minifies it and concattenates all CSS into ./dist/all.min.css

  Is there a way I can rewrite the HTML file, remove all style tags and only put one style tag into it loading the minified CSS?

  解决方案

  The best way to handle this is to use one of the HTML injectors from the get-go. I'm using gulp-inject to some success so far.

  Add gulp-inject to your project:

  npm i --save-dev gulp-inject
  

  Assuming that you have a folder layout similar to this:

  • build/
  • src/
    • index.html
    • less/
      • main.less
    • js/
      • app.js

  Your HTML should include this where you want the CSS or JS files to be injected, either the head for both, or head for the CSS and just before body for your JS files:

  <!-- 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 -->
  

  Then your gulpfile looks something like this:

  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');
      });
  });
  

  This is just a rough idea, and you can do a lot more using gulp-watch for incremental builds, but the key here is that we watch the build directory to choose when to rebuild the HTML file, and watch the src directory for everything else.

  NOTE:

  Since this is getting a lot of upvotes, there are a couple other plugins that do reference replacement beside gulp-inject. You may want to look at them and see if one of them is a better fit for you, especially if you are not using gulp-rev:

  • gulp-usemin
  • gulp-useref

  There are also two CDN libraries that do a similar thing, but for CDN resources

  • gulp-google-cdn
  • gulp-cdnizer (full disclosure: I wrote this one)

  这篇关于有没有一种方法可以重写HTML来使用gulp-minified CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！