SimoneGrunt的基本使用
的有关信息介绍如下：
Grunt是一款自动化构建工具，下面介绍Grunt的安装和基本使用
打开cmd命令行工具，输入npm install -g grunt-cli，全局安装grunt命令。该指令的作用是将grunt命令设置到系统路径，以便任何目录都可以通过grunt运行项目
创建grunt-web项目，并创建package.json，Gruntfile.js文件
{
"name": "grunt-web",
"version": "1.0.0",
"description": "grunt",
"main": "Gruntfile.js",
"dependencies": {
},
"author": "eamiear",
"license": "MIT",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-sass": "*",
"grunt-contrib-cssmin": "^0.12.2",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "*",
"grunt-contrib-qunit": "*",
"grunt-contrib-concat": "*",
"grunt-autoprefixer": "~0.7.2",
"grunt-contrib-compass": "latest",
"grunt-contrib-livereload": "*",
"grunt-contrib-connect": "*",
"grunt-regarde": "*",
"autoprefixer": "^6.1.0",
"grunt-contrib-compass": "^1.0.3",
"grunt-postcss": "^0.7.1",
"load-grunt-tasks": "^3.2.0",
"serve-index": "^1.7.3",
"serve-static": "^1.10.2"
},
"keywords": [
"grunt"
]
}
devDependencies：为依赖插件名称及其版本
执行npm install，下载依赖库
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
dist: {
files: {
'dist/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/scripts/**/*.js'],
dest: 'dist/js/<%= pkg.name %>.js'
}
},
cssmin: {
target: {
files: [
{
expand: true,
cwd: 'dist/css',
src: ['*.css', '!*.min.css'],
dest: 'dist/css',
ext: '.min.css'
}
]
}
},
connect : {
options: {
port: 9000,
hostname: '*',
livereload : 35729
},
server: {
options: {
open : true,
base : [
'.'
]
}
},
dist: {
options: {
open: true,
base: '.'
}
}
},
regarde: {
fred: {
files: '*.html',
tasks: ['livereload']
}
},
clean: {
dist: {
files: [{
dot: true,
src: [
'dist',
'dist/{,*/}*'
]
}]
},
server: 'dist'
},
watch: {
livereload : {
options: {
livereload: '<%=connect.options.livereload%>'
},
files: [
'*.html',
'app.html',
'views/{,*/}*.html',
'src/style/{,}*.css',
'src/scripts/{,}*.js'
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['concat', 'uglify', 'watch']);
grunt.registerTask('serve', function () {
grunt.task.run([
'connect:server',
'watch'
]);
});
grunt.registerTask('build', [
'clean:dist',
'concat',
'cssmin',
'uglify'
]);
};
grunt-web中注册了一个serve任务，这个任务中启动了一个服务连接及观察任务。要执行该任务，只需在命令行控制台中输入grunt serve指令即可。
