安装grunt及其插件

前提是全局环境下安装完trunk

插件官网地址:http://www.gruntjs.net/plugins

1.创建项目名test,同级目录下创建Package.json和Gruntfile.js

Package.json

{
  "name": "test",
  "version": "1.0.0",
  "devDependencies": {
  }
}

Gruntfile.js

//包装函数
module.exports = function(grunt) {
  //任务配置,所有插件的配置信息
  grunt.initConfig({
	//获取 package.json的信息
	pkg: grunt.file.readJSON('package.json')		
  });
  //告诉grunt当我们在终端输入grunt时需要做些什么(注意先后顺序)
  grunt.registerTask('default', ['']);
}

2.进入当前目录下安装grunt,此时package.json文件的devDependencies下会自动生成一个包含插件名和版本号的json。

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
.....

3.在Gruntfile.js文件中添加grunt.loadNpmTasks('插件名');,其中.jshintrc为过滤规则,需自己填写。

//包装函数
module.exports = function(grunt) {
	//任务配置,所有插件的配置信息
	grunt.initConfig({
	  //获取 package.json的信息
	  pkg: grunt.file.readJSON('package.json'),
	  //uglify插件的配置信息
	  uglify: {
	    options: {
		  stripBanners: true,
		  banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' 
	    },
	    build: {
		  src: 'static/js/index.js',
		  dest: 'build/js/index-<%=pkg.version%>.js.min.js'
	    }
	  },
	  jshint:{
	    options: {
		  jshintrc: '.jshintrc'
	    },
	    build: ['Gruntfile.js', 'static/js/*.js']
	  },
	  watch: {
	    build: {
		  files: ['static/js/*.js', 'static/css/*.css'],
		  tasks: ['jshint', 'uglify'],
		  options: {spawn: false}
	    }
  	  }
  });
  //告诉grunt我们将使用的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  //告诉grunt当我们在终端输入grunt时需要做些什么(注意先后顺序)
  grunt.registerTask('default', ['jshint','uglify','watch']);
}

4.运行

grunt 
grunt uglify
grunt watch
......

  

 

  

 

  

  

  

你可能感兴趣的:(安装grunt及其插件)