前端管理工具grunt+bower搭建项目

安装 grunt-cli

npm install grunt-cli -g

为npm创建package.json

npm init

下面是 Grunt 项目的两个基本的文件:

1 package.json

devDependencies 依赖的包，可自行删减

{
  "name": "myApp",
  "version": "0.1.0",
  "devDependencies": {

  	"grunt": "0.4.2",

  	//省事的插件，有了这个可以不用写一堆的 grunt.loadNpmTasks('xxx') 
  	//再多的任务只需要写一个 require('load-grunt-tasks')(grunt) 。
  	"load-grunt-tasks": "^1.0.0",

  	//用来充当一个静态文件服务器，本身集成了 livereload 功能 
        "grunt-contrib-connect": "~0.9.0",
    
        //监视文件的改变，然后执行指定任务，这里用来刷新  grunt server 打开的页面
        "grunt-contrib-watch" : "~0.6.1",
    
        //合并
        "grunt-contrib-concat" : "~0.5.0",
    
        //压缩
        "grunt-contrib-uglify" :"~0.6.0",
    
        //代码校验
        "grunt-contrib-jshint" : "~0.10.0"
  },
}

上面pakeage.jsons注释运行前需要删除掉，这里是为了介绍插件的作用！！

运行  npm install 下载安装上面的依赖

2. Gruntfile.js (暂时只配置了 本地serve和watch)

module.exports = function (grunt) {

	//加载所有任务
	require('load-grunt-tasks')(grunt);

	grunt.initConfig({
		connect: {
		    server: {
		      options: {
		        port: 8888,
		        //项目主目录
		        base: 'myApp',
		        //声明给 watch 监听的端口
		        livereload: 35729,
		        //默认值'*'，可配置为本机某个 IP，localhost 或域名
		        hostname: 'localhost',
		        open : {
		        	//自动打开网页 http://localhost:8888
		        	target : "http://localhost:8888"
		        }
		      }
		    }
		},
		watch : {
			livereload : {
				//监听前面声明的端口  35729
				options : {
					livereload : 35729
					//reload : true
				},
				//下面文件的改变就会实时刷新网页
				files : [
					"./myApp/*"
				]
			}
		}
	});

	grunt.registerTask('serve', ['connect:server', 'watch']);
};

如果你想让文件修改在浏览器上立即刷新的话在被监视的文件上加载此js(也有其他方案 click here!)

<script src="//localhost:35729/livereload.js"></script>

grunt-connect 还可以和 grunt-connect-proxy 结合来制作本地代理访问其他域名的 api 而不用处理跨域问题

安装bower

npm install -g bower

创建bower.json

bower init

通过bower命令安装依赖

bower install [module][#version] --save

例如：

bower install requirejs --save

配置grunt-bower-task

module.exports = function (grunt) {

.....
//追加到上面的gruntfile.js中 
bower : {
	    install : {
		options : {
			targetDir : './myApp/lib',
			//byComponent 按文件夹 byType按类型
			layout: 'byComponent',
			verbose: false,
			cleanTargetDir: false,
			 cleanBowerDir: false
		}
	}
}
    .....
    grunt.registerTask('bowerCopy', ['bower'])
}

控制台运行 ： grunt bowerCopy

依赖的文件就过去了