自动构建工具Grunt
摘要:
大部分项目在部署之前都需要做的就是js、css文件的压缩、合并,以及一些文件的错误检查,甚至是将LESS文件转换成css文件,coffeescript文件转化成js文件等等。但是项目开发是分迭代的,没开发完一次,上面的工作要重新做一遍。那有什么工具能帮助我们来做这些重复的工作呢?Grunt就是其中一个非常好用的工具。下面就来学习一下Grunt。
安装:
Grunt是基于node.js,所以你先安装node.js,安装完之后,只需要执行下面的命令就可以安装Grunt
npm install -g grunt-cli
参数g表示全局安装,grunt-cli表示安装的是grunt的命令行界面。
安装完成之后,他会把Grunt配置到你的系统路径,允许其从任何目录下运行。安装完之后并不能执行操作,因为Grunt是基于模块机构,所以必须安装模块。模块是局部的,是根据项目需求来安装的。在项目的随便一个目录下(最好是根目录,也可以随便创建个目录)新建一个文件---package.json(也可以通过node init来创建),内容如下:
{"name": "", // 项目名称"version": "", // 项目版本"private": true, // 项目是否私有"description": "", // 项目描述"main": "", // 项目主要文件"dependencies": {}, // 项目依赖的模块"devDependencies": { // 项目开发阶段依赖的模块"grunt": "0.x.x", // grunt模块为最新的0.x.x版"grunt-contrib-clean": "~0.5.0", // clean插件不低于0.5.0"grunt-contrib-copy": "~0.5.0","grunt-contrib-less": "~0.11.0","grunt-contrib-uglify": "~0.4.0","grunt-contrib-watch": "~0.6.1","grunt-contrib-concat": "*"},"keywords": [], // 项目关键字"author": { // 作者"name": "","age": ""},"contributors": [], // 贡献者 "license": "" // 版权 }
然后在当前目录下,通过命令终端运行npm install,这时你会发现多出一个node_modules文件夹,里面就是我们安装的模块。
配置:
Grunt和模块都已经安装完成了,下面需要做的就是创建一个配置文件,来告诉Grunt需要去哪里,然后做什么等等。在上面的目录下新建一个文件Gruntfile.js(注意大小写),内容如下:
module.exports = function(grunt) {'use strict';// 配置Grunt各种模块的参数grunt.initConfig({clean: {oldMinFiles: [],afterUglify: []},jslint: {command: "",options: ""},concat: {},uglify: {},watch: {},copy: {},less: {}});// 从node_modules目录加载模块文件grunt.loadNpmTasks('grunt-contrib-copy');grunt.loadNpmTasks('grunt-contrib-clean');grunt.loadNpmTasks('grunt-cmd-concat');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-less');grunt.loadNpmTasks('grunt-contrib-watch');// 定义任务grunt.registerTask('default', ['jsLint', 'concat', 'uglify']);grunt.registerTask('check', ['jslint']);};
只需要在当前目录执行命令
合并文件:
grunt concat
代码检查:
grunt check
后期将介绍grunt的每一个模块。
附录:
grunt.initConfig
配置各模块的参数,每项对应一个同名模块。
grunt.loadNpmTasks
加载所需的模块。
grunt.registerTask
定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。default是默认任务,即直接输入grunt命令,后面不跟任何参数,这时所调用的模块为default对应的任务。
自动构建工具Grunt相关推荐
- iOS应用模块化的思考及落地方案(二)模块化自动构建工具的使用
1.0 iOS模块化中的问题 前文已经介绍了模块化的流程及一些常见的问题,我们在这里再次总结一下. 在工作中,当我们开始一个新项目的时候,最先考虑的就是模块化工作. 模块化工作的想法是很美好的,可是执 ...
- 【Microsoft Azure 的1024种玩法】七十四.五分钟在Azure Virtual Machines中快速部署一套软件项目管理及自动构建工具
[简介] Apache Maven由 Apache 软件基金会所提供的一个软件项目管理及自动构建工具,Maven 为开发者提供了一套完整的构建生命周期框架.开发团队几乎不用花多少时间就能够自动完成工程 ...
- 前端自动化构建工具Grunt
一.了解Gurnt(http://www.open-open.com/lib/view/open1433898272036.html) Grunt 是一个基于任务的JavaScript工程命令行构建工 ...
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...
- 自动化构建工具Grunt、Gulp
使用grunt完成项目的自动化构建 一.准备工作 grunt快要退出历史舞台了,简单学习下 mkdir my-grunt yarn init --yes //创建package模块 yarn add ...
- linux grunt环境,安装 Grunt - Grunt: JavaScript 世界的构建工具 | Grunt 中文网
安装 Grunt 这份文档详细解释了如何安装指定版本的 Grunt 和 Grunt 插件.如果你还没有阅读 快速入门 指南,请先将其看一遍. 概述 Grunt 和 Grunt 插件应当在项目的pack ...
- Go 自动构建工具 dogo 代码已托管到 Git@OSC
Go 程序调试工具 dogo 的代码目前已经托管到 Git@OSC 平台,项目地址是: http://git.oschina.net/liudng/dogo dogo帮助GO语言开发者快速调试程序.d ...
- 浅谈代码自动构建工具
一些小想法: 新加入到一家公司,继续我的棋牌游戏开发生涯.该公司和大多数公司一样,大力发展地方棋牌. 地方棋牌开发的要求就是:快.准.狠! 怎么做到这些要求呢?我的想法就是用工具解放劳动力! 换句话, ...
- 前端工程化系列[02]-Grunt构建工具的基本使用
本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...
最新文章
- 如何安装新linux内核,详解Debian系统中安装Linux新内核的流程
- win10一按右键就闪屏_一步一步的详细讲解Win10磁盘分区教程
- Ada 程序设计语言(The Ada Programming Language)[第二集]
- 【Kotlin】Kotlin 自定义组件 ( 自定义 View | 自定义 SurfaceView )
- hive 小技巧总结
- SAP HANA会代替BW吗?
- 按我的理解string似乎不是字面值类型,但为什么《c++ primer》习题7.55答案说Data类是集合类呢?
- WPF中得到一个控件相对其他控件的坐标
- mysql count group by_MySQL中使用count与group by 的统计问题
- Android安卓WebView下载文件问题
- bootstrap框架写手机端app模板也很漂亮
- OpenHarmony开源图形驱动SIG成立Mesa使能树莓派开发板GPU渲染
- int和Interger区别
- 华为模拟器dhcp中继
- 果蔬净化器哪个牌子好,果蔬净化器科普
- 三天全力冲上中科大先研院
- kepware KEPServerEX与欧姆龙NX系列PLC通讯-Omron NJ Ethernet
- BUUCTF-web极客大挑战
- 【java基础】运动员和教练
- USACO1.3]修理牛棚 Barn Repair
热门文章
- 设计模式学习(一)——策略模式
- angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
- WPF 4 DataGrid 控件(基本功能篇)
- php采集百度推荐词,php抓取百度快照、百度收录、百度热词程序代码_PHP教程
- Java code lib aes 加解密
- 单例模式中的懒汉式以及线程安全性问题
- JavaScript 变量克隆和判断变量类型
- android 自定义 listView
- (function() {})();和(function(){}())
- IOS UITableView 加载未知宽高图片的解决方案