我正在做一个登录页面,我希望尽可能轻量化,以便尽可能快地加载.我有一个依赖项(配置文件),其他所有内容都编码在一个名为index.html的html文件中.
虽然我在单独缩小JS,HTML和CSS方面没有问题,例如,在各自的.js,.html和.css文件中,我似乎无法找到一种方法来缩小包含3个不同方面的单个html文件.
对于我使用grunt-contrib-htmlmin的HTML,但我的主要目标是缩小该文件上的js.
我知道我的目标是2或3KB,我有缓存作为我的朋友等,但原则上我想知道是否有一种直接的方法来实现,或者另一方面我需要组装最终的index.html个别缩小后的档案.
提前致谢.
解决方法
根据@Will的建议,我通过将我提到的3个插件加上@Will建议的
grunt-Process HTML来实现这一目标.
我给你留下了解决这个问题的必要步骤,只需用自己的路径替换路径.
我的路径：
. .. 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('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','processhtml']);
};
