grunt自动化构建工具

1.首先要将 npm更新到最新

使用命令：

npm update -g npm

全局安装 grunt-cli 包，这样在任何目录下都可以调用grunt命令

使用命令：

npm install -g grunt-cli

如果无法下载 使用淘宝镜像：

npm install -g grunt-cli  --registry=https://registry.npm.taobao.org

就是在安装的后面加上  --registry=https://registry.npm.taobao.org  这样就可以更快的下载到对应的资源

安装插件

npm install grunt-contrib-jshint --save-dev --registry=https://registry.npm.taobao.org

2.建立 grunt项目

打开一个新文件夹，比如你的项目在D：/demo文件夹 就使用 命令行 打开

npm init 创建package.json文件：可以考入 我的工程文件内容

{
  "name": "demo",
  "file": "app",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-jshint": "^0.6.5",
    "grunt-contrib-less": "^1.4.0",
    "grunt-contrib-requirejs": "^0.4.4",
    "grunt-contrib-uglify": "^0.2.7",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

执行命令 npm install

在当前目录下创建 src/app.js

在当前文件夹下创建 Gruntfile.js 文件 这是配置入口文件 敲入代码：

module.exports = function(grunt) {
    console.log(grunt.file.readJSON('package.json'));


   grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%=pkg.file %>.js',
        dest: 'dest/<%= pkg.file %>.min.js'
      }
    }
   });


   grunt.loadNpmTasks('grunt-contrib-uglify');


    grunt.registerTask('default', ['uglify']);
  };

运行 grunt 命令

发现 命令窗口打印出 package.json 并且生成 在dest目录下生成min文件  说明 grunt命令 执行 生效 

grunt插件 可以去官网下载：http://www.gruntjs.net/getting-started

如果用官方的例子 记得 配置完文件 就要npm install 这样对应的依赖文件才会加载

在当前文件夹下创建 Gruntfile.js 文件 这是配置入口文件 敲入代码：

在src目录新建一个js文件

grunt.initConfig({
	  my_property: 'whatever',
	  my_src_files: ['src/*.js'],
	  uglify: {
		    static_mappings: {
		      files: [
		        {src: ['src/*.js'], 
			    		dest: 'dest/dest.js',
			    		filter: function(filepath) {
				        	return true;
				     	}}],
		    },
		    dynamic_mappings: {
		      files: [
		        {
		          expand: true,     // Enable dynamic expansion.
		          cwd: 'src/',      // Src matches are relative to this path.
		          src: ['**/*.js'], // Actual pattern(s) to match.
		          dest: 'build/',   // Destination path prefix.
		          ext: '.min.js',   // Dest filepaths will have this extension.
		          extDot: 'first'   // Extensions in filenames begin after the first dot
		        },
		      ],
		    }
	  }
	});
	
	grunt.loadNpmTasks('grunt-contrib-uglify');
//	
//	// A very basic default task.
	  grunt.registerTask('default', ['uglify']);
})

这段代码 主要是动态编译的功能 它会在build文件下 生成对应的min文件 并且在src目录下生成合并后的文件

更改package.json的代码：

{
  "name": "website",
  "version": "1.0.1",
  "description": "website-web",
  "main": "none",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "matchdep": "latest",
    "shelljs": "latest",
    "ngmshell": "latest",
    "brace-expansion": "^1.1.6",
    "fs.realpath": "^1.0.0",
    "grunt": "~0.4.5",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-cssmin": "^1.0.2",
    "grunt-contrib-htmlmin": "^2.0.0",
    "grunt-contrib-jshint": "^1.0.0",
    "grunt-contrib-less": "^1.4.0",
    "grunt-contrib-requirejs": "^0.4.4",
    "grunt-strip": "~0.2.1",
    "inflight": "^1.0.5",
    "path-is-absolute": "^1.0.0",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest",
    "grunt-contrib-imagemin": "latest"
  },
  "author": "demo",
  "license": "ISC",
  "keywords": [
    "grunt"
  ]
}

在当前文件夹下创建 Gruntfile.js 文件 这是配置入口文件 敲入代码：

module.exports = function(grunt) {
	var run_option={
	  	options: {
	        banner: '/*Author:huangjiacheng*/\n'
	      },
//		    static_mappings: {
//		    files: [
//		        {src: ['scripts/*.js'], 
//			    		dest: 'scripts/scripts.js',
//			    		filter: function(filepath) {
//				        	return true;
//				     	}}],
//		    },
            ///动态编译
		    dynamic_mappings: {
		      files: [
		        {
		          expand: true,     // Enable dynamic expansion.
		          cwd: 'test/resources/',      // Src matches are relative to this path.
		          src: ['scripts/**/*.js','scripts/*.js'], // Actual pattern(s) to match.
		          dest: 'resources',   // Destination path prefix.
		          ext: '.js',   // Dest filepaths will have this extension.
		          extDot: 'first'   // Extensions in filenames begin after the first dot
		        },
		      ],
		    }
	  };
	 ///jshint 校验组件
	//console.log(grunt);
	grunt.initConfig({
	  my_property: 'whatever',
	  my_src_files: ['test/resources/scripts/*.js'],
	  //压缩合并
	  uglify: run_option,
	  //普通合并
	  concat: run_option,
	 
	  //jshint 校验组件
	  jshint: {
	      files: ['test/resources/scripts/*.js'],
	      options: {
	        globals: {
	          jQuery: true
	        }
	      }
	  },
		  
	  // html压缩
	  htmlmin:{
	   	dist: { 
	   		options: { 
	   			removeComments: true,
	            removeCommentsFromCDATA: true,
		        collapseWhitespace: true,
		        collapseBooleanAttributes: true,
		        removeAttributeQuotes: true,
		        removeRedundantAttributes: true,
		        useShortDoctype: true,
		        removeEmptyAttributes: true,
		        removeOptionalTags: true
	   		},
	   		files: [
	   			{expand: true, cwd: 'test/pages', src: ['*.jsp','*.html','**/*.jsp','**/*.html'], dest: 'pages'}
	   		]
	   	}
	
	   },
	  
	    //压缩CSS
	    cssmin: {
	      prod: {
	        options: {
	          report: 'gzip'
	        },
	        files: [
	          {
	            expand: true,
	            cwd: 'test/resources/',
	            src: ['styles/*.css'],
	            dest: 'resources'
	          }
	        ]
	      }
	    },
	   watch: {
	      files: ['<%= jshint.files %>'],
	      tasks: ['jshint']
	    },
	   //清除目录
	    clean: {
	      all: ['pages/**', 'pages/*.*'],
	      image: 'images',
	      css: 'resources',
	      html: 'pages',
	      js:'resources'
	    }
	});

	//加载任务组件
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    
    grunt.registerTask('prod', [
     //'copy',                 //复制文件
     //'concat',               //合并文件
     //'imagemin',             //图片压缩
     'cssmin',               //CSS压缩
     'uglify',               //JS压缩
     //'usemin',               //HTML处理
     'htmlmin'               //HTML压缩
   ]); 
    
//    grunt.registerTask('default', ['requirejs','uglify']);
 
//	// A very basic default task.
	 grunt.registerTask('default', ['clean','prod']);

//
//	grunt.registerMultiTask('uglify', 'uglify init', function() {
//	});
};

这些是常用的一些插件  供打包图片 css js html 压缩