package.json, Gruntfile.js等文件配置

Gruntfile.js文件配置如下：

‘use strict’;

module.exports = function(grunt) {

require(‘time-grunt’)(grunt);

require(‘load-grunt-tasks’)(grunt);

grunt.initConfig({

pkg: grunt.file.readJSON(‘package.json’),

modernizr: {
dist: {
"crawl": false,
"customTests": [],
"dest": "dist/js_library/modernizr-output.js",
"tests": [
"applicationcache",
"batteryapi"
],
"options": [
"setClasses"
],
"uglify": true
}

},

//jshint插件配置信息
jshint:{
files: [ 'src/js/*.js'],
options: {
jshintrc: '.jshintrc'
}
},

//watch插件配置信息
watch: {
livereload: {
options: {
livereload: true
},
files: [
'src/*.html',
'src/css/{,*/}*.css',
'src/js/{,*/}*.js',
'src/less/{,*/}*.less'
],
tasks:['jshint', 'less']
}
},

//concat配置信息
concat: {
options: {
//定义一个用于插入合并输出文件之间的字符
separator: ';'
},
//js文件合并
dist: {
//将要被合并的文件
src: ['src/js/*.js'],
//合并后的JS文件的存放位置
dest: 'dist/js/<%=pkg.name%>-<%=pkg.version%>.concat.js'
},

//css文件合并
css: {
//将要合并的css文件
src: ['src/css/*.css'],
dest: 'dist/css/<%=pkg.name%>-<%=pkg.version%>.concat.css'
}

},

//将合并后的js文件进行压缩
uglify: {
options: {
stripBanners: true,
banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
},
build: {
src: 'dist/js/<%=pkg.name%>-<%=pkg.version%>.concat.js',
dest: 'dist/js/<%= pkg.name %>-<%=pkg.version%>.min.js'
}
},
//搭建本地服务器
connect: {
options:{
port:9000,
hostname:'localhost',
livereload: 35729
},

server: {
options: {
open:true,
base: ['src/']
}
}
},

//压缩css文件
cssmin:{
css:{
src: 'dist/css/<%=pkg.name%>-<%=pkg.version%>.concat.css',
dest: 'dist/css/<%= pkg.name %>-<%=pkg.version%>.min.css'
}
},
less: {
compile:{
files: {
'src/less_css/less_css.concat.css': 'src/less/*.less'
},
dev: {
options: {
compress: true,
yuicompress: false
}
}
}
}

});

//'modernizr:dist'
grunt.registerTask('build', [ 'concat', 'uglify', 'cssmin']);
grunt.registerTask('default', [ 'jshint','less', 'connect:server', 'watch']);

};

package.json文件配置如下：

{

“name”: “modernizr”,

“version”: “1.0.0”,

“description”: “use modernize”,

“main”: “index.js”,

“scripts”: {

“test”: “echo \”Error: no test specified\” && exit 1”

},

“author”: “wangnan”,

“license”: “ISC”,

“devDependencies”: {

“grunt”: “~1.0.1”,

“grunt-contrib-concat”: “^1.0.1”,

“grunt-contrib-connect”: “^1.0.2”,

“grunt-contrib-jshint”: “~1.1.0”,

“grunt-contrib-less”: “^1.4.0”,

“grunt-contrib-uglify”: “~2.0.0”,

“grunt-contrib-watch”: “~1.0.0”,

“grunt-css”: “^0.5.4”,

“grunt-modernizr”: “latest”,

“load-grunt-tasks”: “^3.5.2”,

“time-grunt”: “^1.4.0”

}

}

.gitignore文件配置如下：

.idea/

node_modules/

src/

.bowerrc文件配置如下：

{

“directory”: “src/js_library”

}

bower.json

{

“name”: “modernizr”,

“description”: “use modernize”,

“main”: “index.js”,

“authors”: [

“wangnan”

],

“license”: “ISC”,

“homepage”: “”,

“ignore”: [

“*/.“,

“node_modules”,

“bower_components”,

“src/js_library”,

“test”,

“tests”

],

“dependencies”: {

“jquery”: “^3.1.1”

}

}

.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

}

项目目录组织结构

js、css引用

开发时引用：js_library, js , css_library, less_css,

最后js库和自己写的js进行合并压缩，css和css库的文件进行合并压缩。生成应用环境。