Open FrontToEnd opened 8 years ago
FrontToEnd
commented
8 years ago 一旦你创建好了package.json文件，你可以在终端如此头发下面的命令，安装任务所需要的依赖关系：
$ npm install
这个命令将获取所有的包，并把他们存储在项目根目录下的node_module目录中。你可能要在这个目录下添加.gitignore文件(或类似)，这样才不至于将他们签入版本控制器中。确保你的package.json文件添加到你的版本控制器中，用来确保其他开发人员在将使用这个项目需要的安装包。
FrontToEnd
commented
8 years ago 所有代码都必须放置在Gruntfile文件中的wrapper函数中。这个约定了Grunt所有插件在这里配置。
module.exports = function(grunt) {
// 配置任务和插件
};package.json：这个文件被用来存储已经作为npm模块发布的项目元数据（也就是依赖模块）。你将在这个文件中列出你的项目所依赖的Grunt(通常我们在这里配置Grunt版本)和Grunt插件(相应版本的插件) Gruntfile.js：通常这个文件被命名为Gruntfile.js或者Gruntfile.coffee，它是用于配置或者定义Grunt任务和加载Grunt插件的。
FrontToEnd
commented
8 years ago Gruntfile.js文件示例：
module.exports = function(grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成个json数据
pkg: grunt.file.readJSON('package.json'),//表示会引用package.json的数据
uglify: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
//具体任务配置
build: {
//源文件
src: 'src/hello-grunt.js',
//目标文件
dest: 'build/hello-grunt-min.js'
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认执行的任务
grunt.registerTask('default', ['uglify']);
};grunt.file.readJSON('package.json')会把存储在package.json中的JSON元素数据导入到Grunt配置中
FrontToEnd
commented
8 years ago 一个完整的Gruntfile.js文件：
module.exports = function (grunt) {
var lrPort = 35729;
var lrSnippet = require('connect-livereload')({ port: lrPort });
var lrMiddleware = function(connect, options) {
return [
lrSnippet,
connect.static(options.base[0]),
connect.directory(options.base[0])
];
};
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
target: {
files: [
{
expand: true,
cwd: 'src/common/less/',
src: ['**.less'],
dest: 'dist/licenseAgent/css/',
ext: '.css'
},
{
expand: true,
cwd: 'src/licenseAgent/less/',
src: ['**.less'],
dest: 'dist/licenseAgent/css/',
ext: '.css'
}
]
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: '',
src: ['dist/css/*.css','dist/css/*/*.css','vendor/css/*.css'],
dest: 'dist/css',
ext: '.min.css'
}]
}
},
jshint: {
all: ['src/licenseAgent/**/*.js'],
options: {
ignores:[],
force: true,
browser: true,
globals: {
$: false,
jQuery: false
}
}
},
uglify: {
options: {
banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: ['src/licenseAgent/js/*.js','src/common/js/*.js'],
dest: 'dist/js/dist.js'
}
},
qunit: {
options: {
'--web-security': 'no',
force : true,
coverage: {
disposeCollector: true,
src: ['src/licenseAgent/js/**/**js'],
instrumentedFiles: 'test/temp/',
htmlReport: 'test/report/',
coberturaReport: 'test/report/',
linesThresholdPct: 85,
reportOnFail: true
}
},
all:['test/**.html']
},
copy: {
main: {
files: [
{
expand: true,
cwd: 'src/common/css/',
src: ['**.css'],
dest: 'dist/licenseAgent/css/'
},
{
expand: true,
flatten: true,
cwd: 'src/licenseAgent/html/',
src: ['login/login.html','license/index.html'],
dest: 'dist/licenseAgent/'
},
{
expand: true,
flatten: true,
cwd: 'src/licenseAgent/html/license/',
src: ['product_info.html','history_record.html'],
dest: 'dist/licenseAgent/html/'
},
{
expand: true,
cwd: 'src/licenseAgent/image/',
src: ['**'],
dest: 'dist/licenseAgent/image/'
},
{
expand: true,
cwd: 'src/common/image/',
src: ['**'],
dest: 'dist/licenseAgent/image/'
},
{
expand: true,
cwd: 'src/licenseAgent/js/license/',
src: ['**.js'],
dest: 'dist/licenseAgent/js/'
},
{
expand: true,
cwd: 'src/licenseAgent/js/login/',
src: ['**.js'],
dest: 'dist/licenseAgent/js/'
},
{
expand: true,
cwd: 'src/common/js/',
src: ['**.js'],
dest: 'dist/licenseAgent/js/'
},
// includes files within path and its sub-directories
{
expand: true,
src: ['vendor/**'],
dest: 'dist/licenseAgent/'
}
]
}
},
connect: {
options: {
port: 2000,
hostname: '0.0.0.0',
base: '.',
index: 'login.html',
open:{
target: 'http://localhost:2000', // target url to open,
appName: 'firefox', // name of the app that opens,
callback: function() {} // called when the app has opened
}
},
livereload: {
options: {
middleware: lrMiddleware
}
}
},
watch: {
client: {
options: {
livereload: lrPort
},
files: ['src/licenseAgent/html/license/index.html']
}
}
});
//加载JS语法检查插件
grunt.loadNpmTasks('grunt-contrib-jshint');
//加载css压缩插件
grunt.loadNpmTasks('grunt-contrib-cssmin');
//加载监听插件
grunt.loadNpmTasks('grunt-contrib-watch');
//加载less编译模块
grunt.loadNpmTasks('grunt-contrib-less');
//打包壓縮
grunt.loadNpmTasks('grunt-contrib-uglify');
//拷贝
grunt.loadNpmTasks('grunt-contrib-copy');
//单元测试
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-qunit-istanbul');
grunt.loadNpmTasks('grunt-contrib-connect');
//less
grunt.registerTask('onlyLess', ['less']);
//copy
grunt.registerTask('onlyCopy', ['copy']);
//编译less然后打开浏览器
grunt.registerTask('live', ['less','copy','connect','watch']);
//打包
grunt.registerTask('default', ['jshint','qunit','copy','less','uglify']);
//JS语法检查和单元测试任务
grunt.registerTask('checkJs', ['jshint']);
//JS语法检查和单元测试任务
grunt.registerTask('onlyQunit', ['qunit']);
//licenseAgent
grunt.registerTask('licenseAgent', ['jshint','qunit','less','copy']);
};一个完整的package.json:
{
"name": "licensement-grunt",
"version": "0.0.1",
"devDependencies": {
"connect-livereload": "^0.5.4",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-copy": "^0.8.2",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-contrib-jshint": "^0.11.3",
"grunt-contrib-less": "^1.1.0",
"grunt-contrib-qunit": "^0.7.0",
"grunt-contrib-uglify": "^0.11.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-qunit-istanbul": "^0.6.0"
},
"dependencies": {
"connect-include": "^0.2.1"
}
}
一旦你安装好了Node.js和npm，你可以安装grunt-cli包。
npm install -g grunt-cli使用-g标记安装grunt-cli表示全局安装，你可以在任何项目中使用这个命令。 Grunt的运行工具具有两个版本，一个是服务器端的版本（grunt），另一个是客户端版本(grunt-cli)。而我们在项目中需要安装的是客户端版本