使用grunt搭建自动化的web前端开发环境

原文链接:http://blog.csdn.net/wangfupeng1988/article/details/46418203/

按照原文教程,自己创建的几个js文件展示

1. package.json

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-jshint": "^1.0.0",
    "grunt-contrib-uglify": "^0.11.1",
    "grunt-contrib-watch": "^0.6.1"
  }
}

 

2. Gruntfile.js

// 包装函数
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: 'src/test.js',
				dest: 'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
			}
		},
		// 配置jshint
		jshint: {
			build:[ 'Gruntfile.js', 'src/*.js'],
			options: {
				jshintrc: '.jshintrc'
			}
		},
		// 配置watch
		watch: {
			build: {
				files: ['src/*.js', 'src/*.css'],
				tasks: ['jshint', 'uglify'],
				options:{spawn: false}
			}
		}
	});

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

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

  

3. .jshintrc

{
	"boss": false,
	"curly": true,
	"eqeqeq": true,
	"eqnull": true,
	"expr": true,
	"immed": true,
	"newcap": true,
	"noempty": true,
	"noarg": true,
	"undef": true,
	"regexp": true,

	"browser": true,
	"devel": true,
	"node": true
}

  

4. test.js

(function(window, undefined){
	
	function add(a, b){
		return a+b;
	}
})(window);

  

posted @ 2016-03-01 11:50  倾其一生  阅读(111)  评论(0编辑  收藏  举报