Grunt的介绍:
http://www.gruntjs.net/getting-started
注意:到这个选项的时候选这个
3:Git Bush安装Grunt客户端:npm install -g grunt-cli
4:打开git bash查看安装是否成功。
4:项目结构图:
5:把package.json放到MvcApplication1文件夹下。package.json的基本内容。
{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-concat": "^0.5.0", "grunt-contrib-cssmin": "^0.10.0", "grunt-contrib-uglify": "^0.5.1" } }
6:git bash进入MvcApplication1文件夹下。执行npm install,如果此时没有package.json文件则会报错。
7:执行成功
8:在目录下添加Gruntfile.js
// 常用的功能: // uglify:压缩 // cssmin:css操作 // imagemin:图片操作 // htmlmin:html操作 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: {//压缩 options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'//头信息 }, build: { //动态文件映射,当运行任务时会自动找到cwd参数下的src参数下所有符合规则的js文件 //添加或删除文件时不需要更新 Gruntfile。 files: [ { expand: true, // 启用动态扩展 cwd: 'Scripts/', // 源文件匹配都相对此目录 src: ['*.js'], // 匹配规则 dest: 'dest/js/', // 任务目标保存路径 ext: '.min.js', // 目标文件路径中文件的扩展名 extDot: 'first' // 扩展名始于文件名的第一个点号 }, ], } }, cssmin: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', }, //动态文件映射,当运行任务时会自动找到cwd参数下的src参数下所有符合规则的css文件 build: { files: [{ expand: true, cwd: 'Content/', src: ['*.css','**/*.css'], dest: 'dest/css/', ext: '.min.css', extDot: 'first' }] } } }); //载入concat和uglify插件,分别对于合并和压缩 grunt.loadNpmTasks('grunt-contrib-uglify');// grunt.loadNpmTasks('grunt-contrib-cssmin'); //当执行 Grunt 且不通过参数指定任务时,将执行本配置的内容任务。 grunt.registerTask('default', ['uglify','cssmin']); }
9:使用grunt命令执行压缩css, grunt cssmin