grunt自动化工具

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。

安装 CLI

首先,需要先将Grunt命令行(CLI)安装到全局环境中。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。

Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。

CLI 是如何工作的

每次运行grunt 时,他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt 。

如果找到一份本地安装的 Grunt,CLI就将其加载,并传递Gruntfile中的配置信息,然后执行你所指定的任务。

一般步骤

  1. 将命令行的当前目录转到项目的根目录下。
  2. 执行npm install命令安装项目依赖的库。
  3. 执行 grunt 命令。

准备工作

一般需要在你的项目中添加两份文件:package.json 和 Gruntfile

package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。

{ "name": "my-project-name",

  "version": "0.1.0",

  "devDependencies": {

    "grunt": "~0.4.5",

    "grunt-contrib-jshint": "~0.10.0",

    "grunt-contrib-nodeunit": "~0.4.1",

    "grunt-contrib-uglify": "~0.5.0"

  }

}

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。

安装Grunt 和 grunt插件

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。

例如:npm install grunt-contrib-jshint --save-dev

Gruntfile文件案例

文件合并:将src目录下的a.js,b.js,c.js合并dest目录的abc.js

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
concat: {
options: {
separator: ‘;‘
},
dist: {
src: [‘src/a.js‘, ‘src/b.js‘, ‘src/c.js‘],
dest: ‘dest/abc.js‘
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
// 默认任务
grunt.registerTask(‘default‘, [‘concat‘]);
}

文件压缩:

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
options: {
banner: ‘/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
preserveComments: ‘all‘, //不删除注释,还可以为 false(删除全部注释),some(保留@preserve @license @cc_on等注释)
report: "min"//输出压缩率,可选的值有 false(不输出信息),gzip
//美化代码
beautify: {
//中文ascii化,非常有用!防止中文乱码的神配置
ascii_only: true
}
},
build: {
src: ‘src/<%=pkg.file %>.js‘,
dest: ‘dest/<%= pkg.file %>.min.js‘
},
buildall1: {//任务三:按原文件结构压缩js文件夹内所有JS文件
files: [{
‘dest/a.min.js‘: ‘src/a.js‘,
‘dest/b.min.js‘: ‘src/b.js‘,
‘dest/c.min.js‘: ‘src/c.js‘,
}]
},
buildall2: {//任务三:按原文件结构压缩js文件夹内所有JS文件
files: [{
expand:true,
cwd:‘src‘,//js目录下
src:‘**/*.js‘,//所有js文件
dest: ‘dest‘//输出到此目录下
}]
},
release: {//任务四:合并压缩a.js和b.js
files: {
‘dest/ab.min.js‘: [‘dest/a.min.js‘, ‘src/b.min.js‘]
}
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
// 默认任务
grunt.registerTask(‘default‘, [‘uglify‘]);

// 默认任务(指定执行顺序)
/* grunt.registerTask(‘default‘, [‘uglify:release‘]);
grunt.registerTask(‘mina‘, [‘uglify:builda‘]);
grunt.registerTask(‘minb‘, [‘uglify:buildb‘]);
grunt.registerTask(‘minall‘, [‘uglify:buildall‘]);*/

}

参考:http://www.gruntjs.net/getting-started

时间: 2024-10-14 08:34:44

grunt自动化工具的相关文章

Grunt-beginner前端自动化工具-高清视频

[课程介绍]: 作为一名开发人员,在WEB前端项目开发中,重复而枯燥的工作太多,Grunt自动化的项目构建工具,帮你解决这些问题,对重复执行的任务像压缩,合并,编译,单元测试及代码检查等, 通过配置Grunt自动化工具,可以减轻您的劳动,简化您的工作. [课程须知]: 1.想提高运行前端开发工作流程 : 2.有一些项目开发经验,效果会更好. [你能学到什么?] 1. Grunt工具和插件的安装 2. 如何进行项目配置 3. 如何配置任务 4. 如何执行任务 5. Grunt的使用 [课程提纲]:

前端自动化工具 grunt 插件的简单使用(一)

Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less 编译: PS:Grunt 官网 (https://gruntjs.com/).Grunt  就像是一个工具箱,拥有非常丰富的任务插件,可以帮助开发人员实现各种各样目标任务的构建.在Grunt工具箱中,按目标任务类型我们可以分为: 1.编译文档型:比如编译 LESS.Sass.Stylus.Coffe

grunt自动化构建工具

一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务,例如压缩.编译.单元测试等,自动化工具可以减轻你的劳动,简化你的工作 三.如何使用? 1.首先安装nodejs,安装包及源码下载地址:https://nodejs.org/en/download/. 2.安装grunt,需要先将grunt命令行(CLI)安装到全局环境中, npm install -

前端自动化工具 -- fis 使用简介

FIS也是一个新生的前端自动化工具,好下面就来简单介绍一下,真的好简单介绍啊.. 个人觉得FIS已经囊括了一个“大前端”的范畴. 先来看看别人怎么看FIS和Grunt和Gulp F.I.S在实际项目中的应用体验如何? 前端工具里面gulp和fis,有哪些优缺点? FIS和Grunt的区别 FIS入门很简单,提高难度也不大,因为官方已经提供了非常多的文档 围绕着最基本的三条命令 fis install <name> fis release [options] fis server <com

应用Grunt自动化地优化你的项目前端

在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目每维护一次,就需要维护的人员输入一次rjs运行口令重新打包项目,自然是非常繁琐的事情.另外如果我们的项目用sass来写样式,可能还得外开一个koala.如果我们能让项目自己处理自己的所有事宜,那一切就美好多了. 针对上述问题,今天我们就利用更为大众的工具——Grunt,来自动化地处理前端事务(其实r

前端自动化工具

前端自动化 1. 以下都是用淘宝 npm -> cnpm ======================================================== 1. YEOMAN: http://yeoman.io/ : 构建项目脚手架 安装: cnpm install -g yo 检查版本: yo --version 2. Bower: https://bower.io/ : WEB 包管理器 安装: cnpm install -g bower 检查版本: bower -v 3.

grunt 构建工具(build tool)初体验

操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/  直接点击install ,会根据你的操作系统下载对应的 版本 检测是否安装 node -v 现在我们来运行一个简单的node程序,创建hello.js 文件,复制下面的代码: var http = require("http"); http.createServer(function(request, response) {

HTML5技术分享:前端自动化工具推荐

随着前端开发技术的不断发展,前端开发工作也变得越来越复杂,如果能合理地采用一些自动化的工具,生活要容易得多. LiveReload 我目前的开发主力机是一台较早的 13寸 Macbook Pro,外加一台戴尔的显示器.相信做前端开发的都知道,这多出来的一台显示器对工作效率的提升有多大. LiveReload 技术+两块显示屏可以帮你省去重复刷新浏览器这一枯燥的工作.目前实现 LiveReload 的方式很多,如果你倾向于图形化的桌面应用,可以尝试一下 LiveReload.app, 地址是:ht

前端工程化系列[03]-Grunt构建工具的运转机制

在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核心组件和运转机制. Grunt是一套前端自动化构建工具,可以帮助我们简化开发中需要反复处理的任务,甚至可以实现自动构建等功能. Grunt拥有数量庞大的插件,这些插件能够帮助我们处理开发中遇到的绝大多数构建任务,比如代码的预编译.压缩.代码检查.单元测试等.但为什么在终端输入Grunt相关命令,就能