grunt 0.4.1构建工具入门实践(转)

由于最近的食美特项目需要对css文件和js文件进行压缩，各种比较之后，选择了grunt进行构建。google一下，几乎都是grunt0.3的使用说明，按照说明，几乎无法使用。查看gruntjs的入门 Getting started，又是云里雾里的，好吧，只能耐心看文档和不断的实践吧。

一、使用环境说明：

1、在window xp 下使用

2、命令行使用的git的客户端 msysgit 1.7.6(类似的nodejs应用，使用类linux的命令行比较好)

3、只是入门说明，目的是快速的搭建环境，示例能够跑起来。详细的文档资料请参考gruntjs，

一、nodejs安装

进入 http://nodejs.org/ 直接点击 INSTALL，直接安装。（windows 下安装nodejs 会直接安装npm）

二、grunt 安装

由于0.4.1版本的grunt分为3部分：grunt，grunt-cli 和 grunt-init。

1、安装grunt-cli

如果之前安装过grunt，需要先卸载 npm uninstall -g grunt

安装 grunt-cli ： npm install -g grunt-cli

2、创建grunt项目

grunt项目一般需要以下内容:1 、grunt（需要安装）2、grunt 插件（需要安装） 3、package.json 和 Gruntfile.js 。（官方入门Getting started 说通过 grunt-init 和 npm init 创建。对于入门来说，这两中方式都不太好用。推荐直接创建 package.json 和Gruntfile.js 文件）

1、在 c 盘创建文件夹:testGrunt

2、创建2个文件package.json 和 Gruntfile.js

package.json 内容如下

{

"name": "smeitejs",

"version": "0.1.0",

"description": "js for smeite.com",

"homepage": "http://smeite.com/",

"author": "zuosanshao <zuosanshao@qq.com>",

"devDependencies": {

"grunt": "~0.4.1",

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

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

"grunt-contrib-cssmin": "~0.5.0"

}

Gruntfile.js

module.exports = function(grunt) {

// Project configuration.

grunt.initConfig({

uglify: {

options: {

mangle: false

},

build: {

files: {

'assets/config.min.js': ['js/config.js'],

'assets/smeite.min.js': ['js/smeite.js'],

'assets/index.min.js': ['js/index.js']

}

},

cssmin: {

compress: {

files: {

'assets/all.min.css': ['css/base.css', 'css/global.css']

}

},

// smeite: {

// files: {

// 'assets/smeite.all.css': ['/play21/smeite.com/public/assets/css/**/*.css']

// }

// },

with_banner: {

options: {

banner: '/* My minified css file test test */'

},

files: {

'assets/min/base.css': ['css/base.css'],

'assets/min/global.css': ['css/global.css']

}

});

// Load the plugin that provides the "uglify" task.

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-cssmin');

// Default task(s).

grunt.registerTask('default', ['uglify']);

};

　由于在食美特项目只需要压缩js和css文件。所有在Gruntfile.js 配置了2个grunt插件： grunt-contrib-uglify 和 grunt-contrib-cssmin

3 安装 grunt 插件。在git 客户端键入命令 cd /c/testGrunt ;

键入命令 npm install grunt-contrib-uglify 安装uglify
键入命令 npm install grunt-contrib-cssmin 安装cssmin

4、准备相关资料

在 /c/testGrunt 目录下，创建 js目录，并在js目录下创建文件config.js smeite.js index.js ，创建css目录，并在css目录下创建base.css 和 global.css。（这些文件都在Gruntfile.js 有配置，所以需要创建，内容可以随意的写）

5、执行grunt 命令

执行js压缩命令 grunt uglify 效果如下

执行css压缩命令 grunt cssmin 效果如下

整个文件截图

后记：1、uglify 插件的使用说明 https://npmjs.org/package/grunt-contrib-uglify

2、cssmin插件使用说明 https://npmjs.org/package/grunt-contrib-cssmin

3、插件的配置需要在gruntfile.js中配置

转载于:https://www.cnblogs.com/meetrice/archive/2013/04/09/3009913.html

grunt 0.4.1构建工具入门实践(转)相关推荐

linux grunt环境,安装 Grunt - Grunt: JavaScript 世界的构建工具 | Grunt 中文网
安装 Grunt 这份文档详细解释了如何安装指定版本的 Grunt 和 Grunt 插件.如果你还没有阅读快速入门指南,请先将其看一遍. 概述 Grunt 和 Grunt 插件应当在项目的pack ...
前端工程化系列[02]-Grunt构建工具的基本使用
本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...
Gulp vs Grunt 前端工程构建工具
Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...
前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
Maven与Gradle项目构建工具
目录一.Maven介绍一.maven介绍二.分模块开发继承!!!parent!!! 聚合!!! module!!! Dependencies和dependencyManagement Buil ...
前端工程化实战 - 自动化构建工具
文章目录一.自动化构建简介二.自动化构建初体验 2.1 场景描述 2.2 实际操作体验三.常用的自动化构建工具 3.1 Grunt 3.2 Gulp 3.3 FIS 四.自动化构建工具 Grun ...
什么是webpack模块化构建工具
百度百科模块化:是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程,有多种属性,分别反映其内部特性. 计算机模块化:一般指的是可以被抽象封装的最小/最优代码集合,模块化解决的是功能耦合问题. ...
【Android 命令行工具】Android 命令行工具简介 ( 官方文档 | SDK 命令行工具 | SDK 构建工具 | SDK 平台工具 | 模拟器工具 | Jetifier 工具 )
文章目录一.官方文档二.Android 命令行工具简介 1.SDK 命令行工具 2.SDK 构建工具 3.SDK 平台工具 4.模拟器工具 5.Jetifier 工具一.官方文档 Android ...
前端工程化——构建工具选型
一.什么是前端工程化前端工程化是依据业务特点,将前端开发的规范.流程.技术.工具.经验等形成规范并建立成一种标准的体系. 二.为什么要前端工程化实现前端工程化的目的简单来说就是通过流程规范.自动化 ...

grunt 0.4.1构建工具入门实践(转)

grunt 0.4.1构建工具入门实践(转)相关推荐

最新文章

热门文章