首页 > 代码库 > grunt之入门实践
grunt之入门实践
grunt 是基于nodejs的前端项目管理工具，凭借着大量优秀的插件从众多前端项目管理工具中脱颖而出。
确保先安装了nodejs
为了方便使用Grunt，应该在全局范围内安装Grunt的命令行接口(CLI)。
npm install -g grunt-cli
这条命令将会把grunt命令植入到你的系统路径中，这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。
注意，安装grunt-cli并不等于安装了grunt任务运行器,需另外安装grunt; npm install -g grunt
一个简单的grunt实践：
1.进入到指定项目的根目录,一般需要在你的项目中添加两份文件：package.json 和 Gruntfile.js。(Node.js的版本>=0.8.0 ，两个文件具体内容看需求)
2.运行npm install安装项目相关依赖Grunt插件(默认会安装 package.json里面的所有依赖插件)。
3.使用grunt(命令)运行Grunt相关任务。
一个简单的压缩合并操作:
Gruntfile.js:
1 module.exports = function(grunt) { 2 // 配置 3 grunt.initConfig({ 4 pkg : grunt.file.readJSON(‘package.json‘), 5 concat : {//合并任务 6 domop : {//目标 7 src: [‘src/jquery.baza.dropSelect.js‘, ‘src/jquery.baza.resumeTag.js‘], 8 dest: ‘dest/domop.js‘ 9 },10 css : {//目标11 12 src: [‘src/css/*.css‘],13 dest: ‘dest/css/all.css‘14 }15 },16 uglify : {17 options : {18 banner : ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘19 },20 build : {21 src : ‘dest/domop.js‘,22 dest : ‘dest/domop.min.js‘23 }24 },25 cssmin: {26 css: {27 src: ‘dest/css/all.css‘,28 dest: ‘dest/css/all-min.css‘29 }30 },31 32 jshint:{33 hint:{34 src:[‘js/test.js‘]35 }36 }37 38 });39 // 载入concat和uglify和css插件，分别对于合并和压缩40 grunt.loadNpmTasks(‘grunt-contrib-concat‘);41 grunt.loadNpmTasks(‘grunt-contrib-uglify‘);42 43 grunt.loadNpmTasks(‘grunt-css‘);44 45 grunt.loadNpmTasks(‘grunt-contrib-jshint‘);46 47 // 注册任务48 grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘,‘cssmin‘,‘jshint‘]); 49 };
如果只想执行对应任务的目标可以在注册任务的时候指定对应目标即可 ：
grunt.registerTask(‘concat‘, [‘concat:domop‘]); //该任务只执行concat任务中的domop目标
对应的package.json:
1 { 2 "name": "test1", 3 "version": "0.1.0", 4 "author": "bossliu", 5 "homepage": "###", 6 "devDependencies": { 7 "grunt": "~0.4.0", 8 "grunt-contrib-jshint": "*", 9 "jshint": "^2.5.0",10 "grunt-contrib-uglify": "~0.1.2",11 "grunt-contrib-concat": "~0.1.1",12 "grunt-css": ">0.0.0"13 }14 }
详细文档可查看grunt中文社区：http://www.gruntjs.org/docs/getting-started.html
grunt之入门实践
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。