Grunt Ground Zero
Grunt is a popular task runner in the Node/JavaScript space. Any task you perform repeatedly is a good candidate to be automated via Grunt. On a typical development project you would automate building your SASS, linting your JavaScript, minifying your JavaScript, or compiling your CoffeeScript.
Step 1 - Install Grunt
Assuming you have Node already installed then you can install Grunt at the command-line with the following command. It is important to note this is not the Grunt Task Runner.
> npm install -g grunt-cli
The -g
command installs the grunt-cli
package globally. Now you can run grunt
from any directory.
Try running grunt
.
> grunt
# you should see something like this
...
Fatal error: Unable to find local grunt.
...
Step 2 - Adding Grunt to a New Project
We installed grunt-cli
globally but you will still need to install the grunt
module locally. Let's create a new folder for our new awesome project called learn-grunt
.
> mkdir learn-grunt
> cd learn-grunt
You will need to create a new file called package.json
. We add {}
to the file to make it a valid json file. Alternatively you can run npm init
but for this example we are going to keep it simple.
> echo '{}' > package.json
Here is how you install a local copy of grunt.
> npm install grunt --save-dev
Take a look at the contents of the package.json
file.
> cats package.json
# contents of package.json
{
"devDependencies": {
"grunt": "~0.4.2"
}
}
Any module dependencies you might have for your grunt tasks will be listed in your
package.json
file asdevDependencies
.
Let's see what tasks we currently have available.
> grunt --help
# output
...
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
...
You need a Grunt file to store your tasks so you don't see the above informational message.
Step 3 - Create a Grunt File
You will need a Grunt file named Gruntfile.js
or Gruntfile.coffee
to contain your Grunt tasks. In our case we will install a JavaScript minification module called Uglify that can be run by the Grunt task runner. Uglify is one of several available JavaScript minification tools.
> npm install grunt-contrib-uglify --save-dev
Look at the package.json file.
# contents of package.json
{
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-uglify": "~0.3.2"
}
}
We now need to register the grunt-contrib-uglify task in your Gruntfile.js so we can run it from the command line. Update your Gruntfile.js file to look like the following:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
my_target: {
files: [{
expand: true,
cwd: 'src',
src: '**/*.js',
dest: 'dest'
}]
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
Step 4 - Using Grunt
Now we can actually use Grunt to run our uglify task. Run grunt!
> grunt
Output
>> Destination (build/.min.js) not written because src files were empty.
Uh oh, we don't have any files to minify! Let's add some files so we can see the task "uglify" a JavaScript file.
> mkdir src
> touch src/index.js
> open src/index.js
Index.js file contents
function foo() {
var favoriteNumber = 100;
alert(favoriteNumber);
}
Run grunt again.
> grunt
There will be a new folder called dest
. Look at the file dest/index.js
.
function foo(){var a=100;alert(a)}
This article has shown the basics of understanding Grunt to run tasks.
References
转载自: http://polyglotprogrammer.com/grunt-ground-zero/
相关推荐
grunt运行的命令行 放在C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-cli下的
grunt-cli的0.1.13版本压缩包,里面带有node_modules等目录。供有需要的人使用。
grunt.js cookbook
Grunt的实例代码(快速理解Grunt的用法)(内含代码注释)
简单的grunt练习, 看看grunt-contact 模块是怎么使用的. 注意要在C:\Users\Administrator\AppData\Roaming\npm目录放一个grunt-cli
time-grunt, 显示grunt任务的执行执行时间 时间 grunt 显示 grunt任务的经过执行时间 安装$ npm install --save-dev time-grunt用法// Gruntfile.jsmodule.exports =
grunt-cli, Grunt接口命令 grunt Grunt 命令行 接口。全局安装,你就可以在系统的任何位置访问 grunt 命令。npm install -g grunt-cli注意:命令的工作是加载并运行你在本地安装的Grunt版本,不管它的版本
Grunt 离线安装包,包括所有依赖,上传上来看能用不。
使用grunt-babel 转换es6 到es5依赖库
Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。
这是我按《用grunt搭建自动化的web前端开发环境-完整教程》写的Demo。
Grunt的使用demo,包含4个插件:jshint, watch, uglify, concat
grunt项目构建样例,实现js文件css文件等的压缩和合并
grunt工具实现前端代码检测,JS文件压缩合并等.
grunt-wordpress, 用于将内容发布到WordPress的Grunt插件 grunt使用 WordPress 发布内容到WordPress的Grunt插件。支持这里项目通过捐赠在Gratipay上。正在启动Grunt的wordpress就像任何其他的插件插件一样工作。 ...
grunt-wp-boilerplate, WordPress插件模板的Grunt初始化模板 grunt-wp-boilerplate在插件的基础上创建一个WordPress插件,基于 WordPress插件的模板。安装如果你还没有这样做,请安装 grunt-init:npm install -g ...
grunt-ssh, SSH,Grunt的SFTP任务 新主人 启动 12 -23-2015,我正站在两个巨人( @chuckmo和 @andrewrjones) 作为这个项目维护者的肩膀上) 。 欢迎捐赠,如往常。 ( 这里消息也将在下一次发布时删除) 。静音 ssh
简述关于Grunt依赖node的安装使用和功能
grunt-purifycss, 使用grunt构建工具删除未使用的CSS purifycss使用 PurifyCSS 清除不必要的CSS正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。...
grunt-bower-task, 面向 Bower的Grunt插件 grunt-bower-task 安装 Bower 软件包明智地安装。正在启动注意:如果你以前没有使用过 grunt,那么一定要检查一下 guide指南 guide 。 请注意,这里插件仅使用 grunt 的