Grunt
1 安装Grunt命令行工具包 grunt-cli
npm install -g grunt-cli
Grunt被分为好几个包,每个包用于特定的目的。grunt-cli包为我们提供了一个命令行界面。但我们还需要安装grunt才能使用该界面。安装grunt-cli时并没有为我们自动安装grunt。
需要在我们的项目中安装Grunt作为依赖。在一个项目中安装Grunt,可以通过以下步骤实现:
(1)创建一个项目文件夹
(2)在命令行中浏览到该文件夹,通过以下命令为项目创建一个package.json文件
npm init
(3) 通过以下命令安装Grunt
npm install grunt --save-dev
Grunt的运行需要一个名为Gruntfile.js的配置文件支持,在该文件中声明并配置了你想在当前项目中执行的所有任务。
Gruntfile.js文件框架示例:
module.exports = function(grunt) { }
它其实定义了一个Node.js的模块,在模块中接收一个grunt对象 。
在grunt上注册一个默认任务:
module.exports = function(grunt){ grunt.registerTask('default', function(){ console.log('Hello from Grunt.'); }); }
通过grunt.registerTask()方法可以创建一个新的Grunt任务,创建时可以传入一个任务名称以及一个回调函数。当触发该任务时就会执行相应的回调函数。
处理参数
module.exports = function(grunt){ grunt.registerTask('greet', function(name){ grunt.log.writeln('Hi there, ' + name); }); }
执行非default命名任务
grunt greet
在执行任务时提供实际参数
grunt greet:winstar
传多个参数
grunt addNumbers:1:2
处理异常
grunt.warn('warning info.');
强制执行任务
grunt addNumbers:a:2 --force
阻止强制执行
grunt.fatal()
一次注册多个任务
grunt.registerTask('all', ['default', 'greet:Brain', 'addNumbers:2:3']);
registerTask()方法还可以接收第三个参数,在任务名称之后回调函数之前,可以添加对该任务的描述。
配置选项,Grunt提供了grunt.config.inig()方法用于配置Grunt任务。示例如下:
grunt.config.init({ });
创建目录
Grunt内置的grunt.file.mkdir()方法可用以创建文档目录。 创建文档目录示例如下:
module.exports = function(grunt) { grunt.config.init({ copyFiles: { options: { workingDirectory: 'working' } } }); grunt.registerTask('createFolder', 'Create the working folder', function(){ grunt.config.requires('copyFiles.options.workingDirectory'); grunt.file.mkdir(grunt.config.get('copyFiles.options.workingDirectory')); }); }
grunt createFolder
删除目录
使用grunt.file.delete()方法
module.exports = function(grunt) { grunt.config.init({ copyFiles: { options: { workingDirectory: 'working' } } }); grunt.registerTask('clean', 'Deletes the working folder and its contents', function(){ grunt.config.requires('copyFiles.options.workingDirectory'); grunt.file.delete(grunt.config.get('copyFiles.options.workingDirectory')); }); }
复制文件
使用grunt.file.copy()方法
module.exports = function(grunt) { grunt.config.init({ copyFiles: { options: { workingDirectory: 'working', manifest: [ 'index.html', 'stylesheets/style.css', 'javascripts/app.js' ] } } }); grunt.registerTask('copyFiles', function(){ var files, workingDirectory; grunt.config.requires('copyFiles.options.manifest'); grunt.config.requires('copyFiles.options.workingDirectory'); files = grunt.config.get('copyFiles.options.manifest'); workingDirectory = grunt.config.get('copyFiles.options.workingDirectory'); files.forEach(function(file){ var destination = workingDirectory + '/' + file; grunt.log.writeln('Copying ' + file + ' to ' + destination); grunt.file.copy(file, destination); }); }); }
Grunt提供的其他方法
grunt.file.isDir() 判断是否为目录
grunt.file.recurse() 文件/目录递归
grunt.file.read() 读取指定文件内容
grunt.file.write() 将指定内容写到文件中
grunt.file.readJSON() 读取JSON数据
grunt.template.process() 创建一个模板字符串片段,该片段可以用于写进一个文档中
在注册任务时还可以通过this.options()方法获取Grunt的配置对象,如前面的files可以通过以下方式获得:
files = this.options().manifest;
在注册任务时还可以通过this.name方式获取任务名称。
相关推荐
grunt运行的命令行 放在C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-cli下的
grunt-cli的0.1.13版本压缩包,里面带有node_modules等目录。供有需要的人使用。
使用grunt-babel 转换es6 到es5依赖库
Grunt的实例代码(快速理解Grunt的用法)(内含代码注释)
简单的grunt练习, 看看grunt-contact 模块是怎么使用的. 注意要在C:\Users\Administrator\AppData\Roaming\npm目录放一个grunt-cli
grunt-electron-installer, 为电子应用构建 Windows 安装程序的插件插件 电子安装程序Grunt插件 Grunt插件,为电子应用程序构建 Windows 安装程序,使用 Squirrel 。安装npm install --save-dev grunt-electron-...
grunt.js cookbook
grunt项目构建样例,实现js文件css文件等的压缩和合并
Grunt的使用demo,包含4个插件:jshint, watch, uglify, concat
这是我按《用grunt搭建自动化的web前端开发环境-完整教程》写的Demo。
grunt工具实现前端代码检测,JS文件压缩合并等.
混合开发:node grunt混淆压缩 android中的angularjsionic 文件;在做android混合开发,web部分中的文件时用angularjs/ionic 写的;我们经常会用到Directive,Config,Factory,Controller;我在做混淆的时候,先要...
grunt-cli是grunt的客户端,现提供的是基于redhat7.0_x64的客户端
time-grunt, 显示grunt任务的执行执行时间 时间 grunt 显示 grunt任务的经过执行时间 安装$ npm install --save-dev time-grunt用法// Gruntfile.jsmodule.exports =
Grunt自动构建工具可以大幅提高web前端开发的生产力,推荐搭配Less或Sass技术
grunt-cli, Grunt接口命令 grunt Grunt 命令行 接口。全局安装,你就可以在系统的任何位置访问 grunt 命令。npm install -g grunt-cli注意:命令的工作是加载并运行你在本地安装的Grunt版本,不管它的版本
简述关于Grunt依赖node的安装使用和功能
grunt压缩、合并js/css
grunt-ssh, SSH,Grunt的SFTP任务 新主人 启动 12 -23-2015,我正站在两个巨人( @chuckmo和 @andrewrjones) 作为这个项目维护者的肩膀上) 。 欢迎捐赠,如往常。 ( 这里消息也将在下一次发布时删除) 。静音 ssh
grunt-wordpress, 用于将内容发布到WordPress的Grunt插件 grunt使用 WordPress 发布内容到WordPress的Grunt插件。支持这里项目通过捐赠在Gratipay上。正在启动Grunt的wordpress就像任何其他的插件插件一样工作。 ...