building based on covention
This plugin requires Grunt ~0.4.1
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-bboc --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-bboc');
基于约定构建项目,即项目结构按约定组织,则可以保证开发场景和线上场景的项目相对独立,开发使用更易于阅读调试的项目结构,发布则是经过合并、混淆、压缩、打上版本戳的 得到优化适合线上项目。
约定的项目结构:
|-lib
|-js
|-banner
|-A.js
|-B.js
|-alone.js
|-css
|-src
|-js
|-css
|-html
|-example.html
构建后用于发布的项目结构:
dest
|-lib
|-js
|-banner.min.js
|-alone.min.js
|-html
|-example.html
1、目录(lib/js)下有js文件(alone.js),且该目录含有子目录(lib/js/banner);则这一级目录的js文件将被独立的压缩(alone.min.js) 2、目录(lib/js/banner)下有js文件,且该目录不包含子目录;则这一级目录下的js文件将被合并压缩成一个文件,文件名取目录名(banner.min.js)
1、<script>,<img>,<a>,<link>
等引用文件会自动替换为项目构建后的目标资源文件路径,如js,css,png等
2、对于<script>
替换,会自动合并多个重复的引用,并添加当前构建的版本戳
如下,原html文件:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../../lib/js/banner/A.js"></script>
<script src="../../lib/js/alone.js"></script>
<script src="../../lib/js/banner/B.js"></script>
</head>
<body>
</body>
构建后生成的html文件:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../lib/js/banner.min.js?v=201308301118"></script>
<script src="../lib/js/alone.min.js?v=201308301118"></script>
</head>
<body>
</body>
In your project's Gruntfile, add a section named bboc
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
bboc: {
options: {
// Task-specific options go here.
extend: ['path/**']
}
},
})
Type: String
Default value: dest
build target directory
Type: Array
Default value: [ { src: 'lib', dest: 'lib' }, { src: 'src', dest: '' } ]
will process project directory
Type: Array
Default value: []
build target extend the files of match pattern
In this example, custom options are used to do something else with whatever else. So if the testing
file has the content Testing
and the 123
file had the content 1 2 3
, the generated result in this case would be Testing: 1 2 3 !!!
grunt.initConfig({
bboc: {
options: {
extend: ['**/*.md']
}
},
})
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
2013-09-01 v0.1.1 first release