使用GruntJS构建Web程序之合并压缩篇

有如下步骤：

1.新建项目Bejs
2.新建文件package.json
3.新建文件Gruntfile.js
4.命令行执行grunt任务

一、新建项目Bejs
源码放在src下，该目录有两个子目录asset和js。js下放selector.js和ajax.js，这在上一篇已经讲了如何合并压缩它们。这篇只关注asset目录，asset目录下放了一些图片和css文件。一会会把两个css资源reset.css和style.css合并，压缩到dest/asset目录。一个合并版本all.css，一个压缩版本all-min.css。

二、新建package.json
package.json放在根目录下，它的意义上一篇已经介绍过了。 现在的项目结构如下

package.json内容需符合JSON语法规范，如下

代码如下:

{
  "name": "BeJS",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-css":   ">0.0.0"
  }
}

grunt-contrib-concat上一篇已经介绍过了，grunt-css 是这篇要使用的插件。

此时，打开命令行工具进入到项目根目录，敲如下命令: npm install


查看根目录，发现多了个node_modules目录，包含了四个子目录，见图

三、新建文件Gruntfile.js
Gruntfile.js也是放在项目根目录下，几乎所有的任务都定义在该文件中，它就是一个普通的js文件，里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

源码如下


代码如下:

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            css : {
                src: ['src/asset/*.css'],
                dest: 'dest/asset/all.css'
            }
        },
        cssmin: {
            css: {
                src: 'dest/asset/all.css',
                dest: 'dest/asset/all-min.css'
            }
        }
    });
    // 载入concat和css插件，分别对于合并和压缩
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-css');
    // 默认任务
    grunt.registerTask('default', ['concat', 'cssmin']);
};

四、执行grunt任务
打开命令行，进入到项目根目录，敲 grunt

从打印信息看出成功的合并和压缩并生成了dest目录及期望的文件，这时的项目目录下多了dest，如下

至此，css合并压缩完毕。

赞 (0)

相关推荐

  • 学习使用grunt来打包JavaScript和CSS程序的教程

    学习使用grunt来打包JavaScript和CSS程序的教程

    Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理.在JavaScript的世界里,随着Node.js的流行,JavaScript原生的构建工具已经成为可能. Grunt.js是基于Node.js的自动化任务运行器.Grunt.js结合NPM的包依赖管理,完全可以媲美Maven.Grunt.js天然适合前端应用程序的构建--不仅限于JavaScript项目,同样可以用于其他语言的应用程序构建.越来越多的JavaScript项目已经在使用Grunt,其中最大的使用者包括著名的jQu

  • Grunt入门教程(自动任务运行器)

    在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件.压缩代码.检查语法错误.将Sass代码转成CSS代码等等.通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时.Grunt就是为了解决这个问题而发明的工具,可以帮助我们自动管理和运行各种任 务. 简单说,Grunt是一个自动任务运行器,会按照预先设定的顺序自动运行一系列的任务.这可以简化工作流程,减轻重复性工作带来的负担. ## 安装 Grunt基于Node.js,安装之前要先安装Node.js,然后

  • 基于Node.js的JavaScript项目构建工具gulp的使用教程

    基于Node.js的JavaScript项目构建工具gulp的使用教程

    npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

  • 使用GruntJS构建Web程序之安装篇

    使用GruntJS构建Web程序之安装篇

    它有以下作用 合并JS文件    压缩JS文件    单元测试(基于QUnit)    一句话:完全自动化(automation) 以下是它的安装过程. 一.安装node 参考nodejs入门 (最新的node会自动安装npm) 二.安装grunt命令行工具grunt-cli 使用-g全局安装,这样可以在任何一个目录里使用了.命令: npm install -g grunt-cli 需要注意的是在linux或mac下有时会报没有权限的错误,这时须在前面加一个sudo, 安装后,可以查看改工具的版

  • 使用GruntJS构建Web程序之Tasks（任务）篇

    使用GruntJS构建Web程序之Tasks（任务）篇

    如何自定义Grunt任务 有时我们需要写一些自己的grunt任务,下面是一个具体例子 一.准备 1. 新建一个目录g12. 新建package.json,放入g13. 新建Gruntfile.js,放入g1 package.json 复制代码 代码如下: {    "name": "g1",    "version": "0.1.0",    "author": "@snandy",  

  • 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

    方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命令: 复制代码 代码如下: npm install --save-dev grunt-contrib-watch connect-livereload 2. 安装浏览器插件:Chrome LiveReload

  • 配置Grunt的Task时通配符支持和动态生成文件名问题

    copy: { // 这是Task里的其中一个Target dests: { expand: true, cwd: '<%=config.app%>/newFolder', src: ['**/{a*,b*}.html'], dest: '<%=config.dist%>/newFolder', ext: ".shtml", extDot: "first", flatten:true, //去掉中间上当,下面的rename可以再找回来 ren

  • 使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目

    使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目

    Grunt 简介 Grunt是一款基于js和node.js的构建工具,由于这段时间node.js越来越火爆,grunt拥有丰富的开源社区支持,产生了很多插件.还有一些插件散落在node社区.构建是一个和宽泛的表述,传统理解就是编译.打包.复制,而今,随着技术越来越丰富,构建还包括对前端组件的预处理,比如sass.less预处理成css,css和js的压缩和合并.grunt的插件可以很好的支持这些新的构建概念,而且更为适合用开源技术堆砌的项目. 虽然Grunt更多的用于程序构建,但是本质上Grun

  • 使用GruntJS构建Web程序之构建篇

    使用GruntJS构建Web程序之构建篇

    大概有如下步骤 新建项目Bejs    新建文件package.json    新建文件Gruntfile.js    命令行执行grunt任务 一.新建项目Bejs 源码放在src下,该目录有两个js文件,selector.js和ajax.js.编译后代码放在dest,这个grunt会自动生成. 二.新建package.json package.json放在根目录下,它包含了该项目的一些元信息,如项目名称.描述.版本号,依赖包等.它应该和源码一样被提交到svn或git. 现在的项目结构如下 p

  • 使用Grunt.js管理你项目的应用说明

    Grunt.js是什么?Grunt.js是一个Javascript Task Runner(Javascript任务运行器),其基于NodeJS,可用于自动化构建.测试.生成文档的项目管理工具. Grunt.js并不是仅仅是构建工具,实际上他只是任务运行器,管理每个子任务的自动化运行,我们还能使用他做更多东西. 为什么使用Grunt.js?简单的说:为了自动化.对于前端项目,例如: •为了明确模块分工,我们可能会将Javascript代码拆成很小很小的一个个js文件,但是我们知道,在最终页面上,

  • 使用GruntJS链接与压缩多个JavaScript文件过程详解

    自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想把这些多个JS文件变成 一个JS文件发布出去,于是我的问题来啦,怎么把这些JS文件搞成一个啊,群里有个 朋友告诉我,GruntJS – JavaScript多文件编译,风格检查,链接与压缩神器.Google了一 把终于帮我完成这个任务,算是入门,分享一下过程. 一什么是GruntJS 不想翻译英文,自己看它的网站吧->http://gruntjs.com/

  • Node.js的项目构建工具Grunt的安装与配置教程

    Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等.此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装进行管理. 所以 NPM 生成的 package.json 项目文件,里面可以记录当前项目中用到的 Grunt 插件,而 Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作. 安装 Grunt-cli 其实是安装 Grunt-cli ,这里安装Gr

随机推荐