Grunt_1从安装开始创建一个基本的Grunt

Grunt的介绍：http://www.gruntjs.net/getting-started

文件架构：https://github.com/zhangsai521314/Grunt

1：安装Git Bash，下载地址https://git-scm.com/download/win（安装一路next）

2：安装node.js+npm，下载地址：https://nodejs.org/en/download/

注意：到这个选项的时候选这个

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

 

 

写文不易,转载需注明出处：http://www.cnblogs.com/zszs/p/5662541.html

转载于:https://www.cnblogs.com/zszs/p/5662541.html