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

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

本文介绍了使用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任务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-13 09:58