前端开发流程工具(Grunt)

Categories:  Tool

在上面一篇文章中,我们介绍了前端的包管理器Bower,这次我们来了解前端应用开发流程工具Grunt,在JavaScript开发过程中,我们常常会遇到一些重复性的任务,譬如检查语法是否正确,压缩代码,合并文件,要是以前我们会选择不同的工具来完成不同的任务,但是这样感觉既复杂又耗时,但是现在有了Grunt,Grunt就是为了解决这些问题而发明的一个工具,可以帮助我们自动管理和运行各种JavaScript任务,简化我们的工作流程。

Grunt

####为什么使用任务运行工具?
简而言之,自动化。当你处理诸如代码最小化, 代码编译, 单元测试, 代码规范校验等等重复任务时, 你必须要做的工作越少,你的工作就变得越简单。在你完成配置后,不费吹灰之力,一个任务运行工具可以替你和你的团队完成绝大部分日常工作。(官网资料)

为什么使用Grunt?

Grunt是一个庞大的生态系统,每天都在成长。你可以自由的选择数以百计的插件以帮助你自动化的处理任务。如果你所需要的插件还被有人创建,那么你可以自己创建插件并通过npm很方便的发布以供更多人使用并一起完善。(官网资料)

下面我们来看看当我们运行Grunt的样子吧,下面这图是我使用Grunt自动运行我一个Nodejs项目的截图:

grunt

如何安装Grunt?

  1. Grunt和Grunt的插件都是通过Node.js的包管理器npm来安装和管理的。Grunt 0.4.x要求Node.js的版本>=0.8.0(也就是0.8.0及以上版本的Node.js才能很好的运行Grunt)。

  2. 为了方便使用Grunt,我们可以把我们的Grunt安装到我们的全局变量中,这样我们就可以在每个项目都使用Grunt。

npm install -g grunt-cli

通过以上这两步,我们就将Grunt安装好了,以后直接在我们命令行中就可以使用了。

注意,安装grunt-cli并不等于安装了grunt任务运行器!Grunt CLI的工作很简单:在Gruntfile所在目录调用运行已经安装好的相应版本的Grunt。这就意味着可以在同一台机器上同时安装多个版本的Grunt。

如和使用grunt来管理项目?

  • 首先需要往项目里添加两个文件:package.json和Gruntfile.js。其中package.json是用来为npm存放项目配置的元数据的,可以通过这里来学习npm init。可以通过这个命令来生成我们项目的package.json,与grunt关系最大的配置在devDependencies中。这是我的一个Nodejs项目的package.json:
{
  "name": "twMovie",
  "version": "0.0.1",
  "description": "twMovie is builded by node and mongodb",
  "main": "app.js",
  "dependencies": {
    "body-parser": "^1.10.2",
    "connect-mongo": "^0.7.0",
    "cookie-parser": "^1.3.3",
    "crypto": "0.0.3",
    "express": "^4.11.1",
    "express-session": "^1.10.1",
    "grunt-concurrent": "^1.0.0",
    "jade": "^1.9.1",
    "moment": "^2.9.0",
    "mongoose": "^3.8.22",
    "morgan": "^1.5.1",
    "path": "^0.11.14",
    "serve-favicon": "^2.2.0",
    "underscore": "^1.7.0"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-nodemon": "^0.3.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/tw93/twMovie.git"
  },
  "keywords": [
    "twmovie",
    "movie"
  ],
  "author": "tw93",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/tw93/twMovie/issues"
  },
  "homepage": "https://github.com/tw93/twMovie"
}
  • 然后在命令行进入项目所在目录,键入如下命令即可,npm会根据devDependencies中的配置,将需要的grunt及其插件下载到你的项目目录中。
npm install grunt --save-dev
  • 接着需要新建一个叫做Gruntfilejs的文件,它用于配置或者定义Grunt任务和加载Grunt插件,这个文件就是当我们在命令行里面运行grunt时候的一个“入口文件”,我们需要在这个文件里面设置好我们的自定义任务,具体可以看Grunt的官方文档

  • 最后通过grunt命令就可以自动化运行我们的项目了。 注:一个比较完整的Gruntfile.js我是这样写的:

module.exports = function(grunt) {
    grunt.initConfig({
        watch: {
            jade: {
                files: ['views/**'],
                options: {
                    livereload: true
                }
            },
            js: {
                files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],
                // tasks: ['jshint'],
                options: {
                    livereload: true
                }
            }
        },
        nodemon: {
            dev: {
                script: 'app.js',
                options: {
                    file: 'app.js',
                    args: [],
                    ignoredFiles: ['README.md', 'node_modules/**', '.DS_Store'],
                    watchedExtensions: ['js'],
                    watchedFolders: ['./'],
                    debug: true,
                    delayTime: 1,
                    env: {
                        PORT: 3000
                    },
                    cwd: __dirname
                }
            }
        },
        concurrent: {
            target: {
                tasks: ['nodemon', 'watch'],
                options: {
                    logConcurrentOutput: true
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-nodemon');
    grunt.loadNpmTasks('grunt-concurrent');
    grunt.option('force', true);
    grunt.registerTask('default', ['concurrent:target']);
};

还是建议大家多看看Grunt的官方文档,通过官方文档来学习会快一点。

Buy Me a Coffee !
Disqus is climbing the Great Fire Wall of China, Maybe She needs a ladder.   🤦🏼‍️ 🤷🏼‍️
Read More

前端开发流程工具(cmder,Bower)

【2015-02-17】前端开发的确不是以前那种前端开发,如果说我们过去的前端开发是处于“刀耕火种”时代,那么现在的前端开发无疑已经进入了"工厂生产"的时代。近几年,随着Nodejs的出现,伴随着出现了很多优秀的前端开发管理工具,极大的方便着我们的前端开发,的确Nodejs是上帝送给我们前端开发工程师最好的礼物。下面几篇文章我给大家来介绍一些前端开发过程中需要用到的优秀的工具:cmder、Bower、grunt、Yeoman ...