本文地址: http://www.cnblogs.com/blackmanba/p/frontend-scaffold-grunt.html或者http://forkme.info/frontend-scaffold-grunt/, 转载请注明源地址。

概述

最近在做Toki项目时遇到一个苦逼问题, 就是每次调试的时候需要将Javascript和css同时压缩(因为发布的成品代码是经过压缩的)。寻寻觅觅, 终于让我找到一款前端构建神器--Grunt。Grunt是什么呢? 正如官网定义的:

GRUNT

The JavaScript Task Runner

也就是说, Grunt实际上是一个Javascript任务运行框架, 本身并不包括具体任务的实现逻辑。要使用Grunt, 首先需要根据执行的具体任务选择插件, 并通过配置文件指定如何构建项目。以后只要执行配置文件, Grunt就会自动构建项目。所以我更愿意称Grunt为功能强大的前端脚手架。

插播一下, 这里介绍一个持续构建的工具Travis-cli, 感兴趣的可以点这里

Hello World

好了, 介绍了那么多, 接下来就是如何使用了。每种工具(或语言)第一个讲的就是Hello World程序, 程序需要用到Grunt以及Grunt.log插件, 下面就来具体介绍:

Grunt安装

Grunt本身是基于node.js开发的应用, 那第一步当然就是安装node.js这个神器啦o(╯□╰)o!! 根据不同的平台选择各自的安装包安装(node.js的具体安装不在本文的讨论范围内)。

完成了第一步之后, 接下来就是安装Grunt了, Grunt需要先安装CLI(Grunt's command line interface)工具, 控制台下使用npm命令完成安装: npm install -g grunt-cli , 接下来安装Grunt模块: npm install grunt -g --save-dev

如果你不跑任何任务的话, Grunt到这里就已经安装成功了, 你也可以出去找找妹纸逛逛街了(额, 暴露了我的性别, 女生表介意哈)。但是问题来了, Grunt是一个任务运行工具, 任务不存在又如何称得上Task Runner呢?

Gruntfile文件

好了, 废话说了那么多, 接下来就讲如何配置Gruntfile文件。首先新建目录GruntFirst(名字自定), 在GruntFirst新建Gruntfile.js文件, 这个是Grunt必须的配置文件, 在文件中写入:

/**
* Gruntfile.js 固定写法
* module.exports = function(grunt){
* ××××;
* }
*/
module.exports = function(grunt){
'use strict'; grunt.registerTask('default', function(){
grunt.log.writeln('Hello world');
});
};

然后在当前目录打开终端, 输入grunt defult, 如果看到以下输出, 恭喜您已经进入了Grunt的世界!!

问题解决

还记得本文开始的时候提到的问题吗?如果忘记了的话证明您木有认真阅读本文, 果断回去重新看一遍! 好了, 下面就是问题的解决方法, 采用Grunt自动构建并且监控文件变化:

module.exports = function(grunt) {
'use strict';
// project config
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), // load package.json file
cssmin: {
options: {
'keepSpecialComments': 0
},
combine: {
files: {
'build/css/style.css': [
'css/*.css'
]
}
}
},
jshint: {
options: {
jshintrc: '.jshintrc'
}, files: ['Gruntfile.js', 'javascript/*.js', 'node_modules/*.js', '!javascript/jquery-2.1.0.min.js']
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: [{
cwd: 'javascript',
src: '**/*.js', // source files mask
dest: 'build/javascript', // destination folder
expand: true, // allow dynamic building
flatten: true // remove all unnecessary nesting
/*ext: '.min.js' // replace .js to .min.js*/
}]
}
}, htmlhint: {
options: {
htmlhintrc: '.htmlhintrc'
},
src: ['*.html']
}, watch: {
css: {
files: ['css/**/*.css'],
tasks: ['cssmin']
},
js: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
},
uglify: {
files: ['javascript/**/*.js'],
tasks: ['uglify']
}, htmlhint: {
files: ['*.html'],
tasks: ['htmlhint']
}
}
});
// load Grunt plug-in
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-htmlhint');
// register default task
grunt.registerTask('default', ['watch']);
};

Note: grunt-contrib-cssmin, grunt-contrib-watch, grunt-contrib-jshint, grunt-contrib-uglify, grunt-htmlhint插件的功能分别是: css压缩, 文件监控(ps: 文件变化时自动执行), javascript检验, javascript压缩, html检查。Grunt的第三方插件很多, 而且还在不停增加。其他插件以及具体用法就要您根据需求的需要自己去配置了。

对上面的配置有什么不懂的, 可以查看各个插件的具体配置信息和官方文档

总结

Grunt是新兴的项目任务运行工具, 可以帮助我们更快更好的构建和测试项目。

构建工具系列二--Grunt的更多相关文章

  1. 构建工具系列一--Travis-cli

    本文地址: http://www.cnblogs.com/blackmanba/articles/continuous-integration-tool-travis-cli.html或者http:/ ...

  2. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

  3. 构建工具-----Gradle(二)-----myeclipse 10和myeclipse2015安装gradle插件----其他版本的myeclipse类似

    我们需要给myeclipse安装gradle的插件.这样myeclipse就能识别到gradle项目了,直接加载进去即可. 我们先安装配置系统命令行的gradle,挺简单的,下载后配置环境变量即可,详 ...

  4. SQL 工具系列二

    1.RedGate 工具 SQL Prompt 脚步智能提示工具 脚步提示工具,轻松写入,编辑和探索SQL: SQL Prompt能根据数据库的对象名称,语法和用户编写的代码片段自动进行检索,智能的为 ...

  5. JDK的命令行工具系列 (二) javap、jinfo、jmap

    javap: 反编译工具, 可用来查看java编译器生成的字节码 参数摘要: -help 帮助 -l 输出行和变量的表 -public 只输出public方法和域 -protected 只输出publ ...

  6. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  7. Gulp vs Grunt 前端构建工具对比

    Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...

  8. 前端构建工具 Gulp.js 上手实例

    在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

  9. 前端构建工具gulp之基本介绍

    1.基本介绍 gulp.js是一个自动化构建工具,是自动化项目的构建利器.可以对网站的资源进行优化,将开发过程中一些重复的任务通过执行命令自动完成.这样能很大的提高我们的工作效率. gulp.js是基 ...

随机推荐

  1. poj3281 Dining 最大流(奇妙的构图)

    我是按照图论500题的文档来刷题的,看了这题怎么也不觉得这是最大流的题目.这应该是题目做得太少的缘故. 什么是最大流问题?最大流有什么特点? 最大流的特点我觉得有一下几点: 1.只有一个起点.一个终点 ...

  2. Win8.1应用开发之适配器模式(C#实现)

    实际上适配器模式是用于解耦.设想一下我们的程序模块A在与模块B打交道时,需要在许多地方多次使用B中某个类的方法,而负责开发B的程序猿Tom还未完全实现该类,会随时更改该类中的方法,那么当Tom在修改时 ...

  3. -1.#IND000 &&图像类型转换

    (1):float acos(float x) 参数x的范围为-1.0f到1.0f之间,返回值范围在0.0f到3.141592653f之间,值得注意的是:当x超出[-1.0f,1.0f]这个范围时此函 ...

  4. Python操作Oracle

    [root@oracle02 pythonsoftware]# rpm -ivh oracle-instantclient-basic-11.1.0.1-1.x86_64.rpm Preparing. ...

  5. springboot-注解讲解

    @Configuration:声明我们JdbcConfig是一个配置类 @PropertySource:指定属性文件的路径是:classpath:jdbc.properties 通过@Value为属性 ...

  6. tensorflow常见函数

    1.类型转换 tf.string_to_number(string_tensor,out_type=None,name=None)  #字符串转为数字 tf.to_double(x,name='ToD ...

  7. php 流

    php:// — 访问各个输入/输出流(I/O streams) 说明 PHP 提供了一些杂项输入/输出(IO)流,允许访问 PHP 的输入输出流.标准输入输出和错误描述符, 内存中.磁盘备份的临时文 ...

  8. HDU 5279 YJC plays Minecraft (分治NTT优化DP)

    题目传送门 题目大意:有$n$个小岛,每个小岛上有$a_{i}$个城市,同一个小岛上的城市互相连接形成一个完全图,第$i$个小岛的第$a_{i}$个城市和第$i+1$个小岛的第$1$个城市连接,特别地 ...

  9. [JoyOI] 1035 棋盘覆盖 (二分图匹配)

    题目描述 给出一张nn(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少12的多米诺骨牌进行掩盖. 输入格式 第一行为n,m(表示有m个删除的格子) 第二行到m+1行为x,y,分 ...

  10. String 基本使用方法, 以及要注意的事项

    package chengbaoDemo; public class Test01 { public static void main(String[] args) { //字符串的两种创建形式 St ...