使用CSS和Javascript来缩小单个HTML文件的Grunt任务

问题描述

我正在做一个登录页面，我想尽可能轻量化，以尽可能缩短加载时间。我有一个单独的依赖项（配置文件），其他所有内容都被编码到一个名为 index.html 的html文件中。

尽管在缩小JS，HTML和CSS方面没有问题，例如，在它们各自的.js，.html和.css文件中，我似乎无法找到缩小包含单个html文件的方法3个不同的方面。

对于HTML，我使用，但我的主要目标是还要在该文件中缩小js。

我知道我在这里为2或3KB计划，而我有缓存作为我的朋友等，但为了原则，我想知道是否有一种简单的方法来实现，另一方面，我需要在个别缩小后组装最终的index.html文件。

在此先感谢。

解决方案

遵循@Will的建议，我完成了混搭3个插件并加上@Will建议的。

我为你解决这个问题提供了必要的步骤，只需自己替换路径即可。

我的路径：

 。 
 .. 
 index.html 
 styles.css 
 index.js 
  

在控制台上：

  npm install grunt-contrib-clean --save-dev 
 npm install grunt-contrib-htmlmin --save-dev 
 npm install grunt-processhtml --save-dev 
 npm install grunt-contrib-uglify --save-dev 
 npm install grunt- contrib-cssmin --save-dev 
  

Gruntfile.js：

  module.exports = function（grunt）{
 
 grunt.initConfig（{
 pkg：grunt.file.readJSON（' 
 cssmin：{
 minify：{
 options：{
 banner：'/ *！<％= pkg.name％><％ = grunt.template.today（yyyy-mm-dd）％> * / \''
}，
展开：true，
 src：['* .css' ，'！* .min.css']，
 dest：'dist /'，
 ext：'.min.css'
} 
}，
 uglify ：{
选项：{
 banner：'/ *！<％= pkg.name％> <％= grunt.template.today（yyyy-mm-dd）％> * / \''
}，
 build：{
 src：'index.js'，
 dest：'dist / index.min.js'
 } 
}，
 processhtml：{
 dist：{
 options：{
 process：true，
 data：{
 title：'我的应用'，
消息：'这是产品分发'
} 
}，
文件：{
'dist / index.min.html'：['' index.html'] 
} 
} 
}，
 htmlmin：{
 dist：{
 options：{
 removeComments：true， 
 collapseWhitespace：true 
}，
文件：{
'dist / index.html'：'dist / index.min.html'
} 
 } 
}，
 
 clean：['dist * // *。min。*'] 
}）; 
 
 grunt.loadNpmTasks（'grunt-contrib-htmlmin'）; 
 grunt.loadNpmTasks（'grunt-contrib-uglify'）; 
 grunt.loadNpmTasks（'grunt-contrib-cssmin'）; 
 grunt.loadNpmTasks（'grunt-processhtml'）; 
 grunt.loadNpmTasks（'grunt-contrib-clean'）; 
 grunt.registerTask（'default'，['cssmin'，'uglify'，'processhtml'，'htmlmin'，'clean']）; 
 grunt.registerTask（'build'，['cssmin'，'uglify'，'htmlmin'，'processhtml']）; 
}; 
  

I'm doing a login page which I want to be as lightweight as possible for the quickest possible loading time. I have a single dependency (a configuration file) and everything else is coded on a single html file, called index.html.

Although I have no problem in minifying JS, HTML and CSS seperately, e.g, in their respective .js, .html and .css files, I can't seem to find a way to minify a single html file which contains the 3 different aspects.

For the HTML I'm using grunt-contrib-htmlmin but my main goal is to also minify the js on that file.

I know I'm aiming for 2 or 3KB here and I have cache as my friend, etc, but for principle I want to know if there is a straightforward way to achieve or on the other hand I need to assemble the final index.html file after individual minification.

Thanks in advance.

解决方案

Following the suggestion from @Will I did accomplish this by mashing up the 3 plugins I mentioned plus the grunt-Process HTML that @Will suggested.

I leave you with the steps necessary to solve this, just replace the paths by your own.

My paths:

 .
 ..
 index.html
 styles.css
 index.js

On the console:

npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-htmlmin --save-dev
npm install grunt-processhtml --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-cssmin --save-dev

Gruntfile.js:

module.exports = function (grunt) {

  grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     cssmin: {
       minify: {
         options: {
           banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
         },
         expand: true,
         src: ['*.css', '!*.min.css'],
         dest: 'dist/',
         ext: '.min.css'
       }
     },
     uglify: {
       options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
       },
       build: {
         src: 'index.js',
         dest: 'dist/index.min.js'
       }
     },
     processhtml: {
       dist: {
         options: {
           process: true,
           data: {
             title: 'My app',
             message: 'This is production distribution'
           }
         },
         files: {
           'dist/index.min.html': ['index.html']
         }
       }
     },
     htmlmin: {
       dist: {
         options: {
           removeComments: true,
           collapseWhitespace: true
         },
         files: {
           'dist/index.html': 'dist/index.min.html'
         }
       }
     },

     clean: ['dist*//*.min.*']
   });

  grunt.loadNpmTasks('grunt-contrib-htmlmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-processhtml');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.registerTask('default', ['cssmin','uglify', 'processhtml', 'htmlmin','clean']);
  grunt.registerTask('build', ['cssmin','uglify', 'htmlmin', 'processhtml']);
};

这篇关于使用CSS和Javascript来缩小单个HTML文件的Grunt任务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！