GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)

时间:2022-09-22 09:39:03

一、Grunt.js简介(实现自动化)

1)简要说明:

  1.GruntJs是基于node的javascript命令行工具,可以自动化构建、测试、生成文档的项目管理工具;

  2.使用GruntJs可以自动化的管理子任务的运行;

  3.很多开源JS项目都是使用它搭建。如jQuery、Qunit、CanJS等

2)使用原因:

  1.合并js文件——为了明确模块分工,可能会将Javascript代码拆成很小很小的一个个js文件,为减少Http Request我们需要合并js文件

  2.压缩js文件、css文件等,从而减小请求的文件。

  3.源代码测试

  4.将备注自动生成文档

二、GruntJs安装

  1.安装node,npm(最新版本的node会自动安装npm)

  2.安装命令行工具grunt-cli——npm install -g grunt-cli(-g 全局安装)

  3.安装grunt及其插件——npm install --save -dev (安装完成后可以使用grunt -version查看版本)

  4.若之前安装过旧版本的grunt可以使用npm unistall -g grunt-cli卸载

三、package.json文件说明

1)说明:package.json是项目配置文件,包括项目的依赖信息,以及作者、版本等信息

2)例子:

{
"name": "myProject",
"version": "0.1.0",
"author": "@wish",
"devDependencies": { //项目的依赖
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.1", //校验,语法检查
"grunt-contrib-uglify": "~0.1.2", //压缩
"grunt-contrib-concat": "~0.1.1" //合并文件
}
}

四、利用grunt压缩JS文件/合并JS文件

1)在node安装路径下建立工程 testJsUglify

2)配置package.json文件,放置在工程的根目录

  "name": "testJsUglify",
"version": "0.1.0",
"author" : "@wish",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-uglify": "~0.1.2",
"grunt-contrib-concat": "~0.1.1"
}
}

3)安装工程的依赖插件(package.json中配置的信息)

  命令行中进入工程根目录,执行命令:npm install

  工程testJsUglify根目录中增加了node_modules目录,包含grunt、grunt-contrib-concat、grunt-contrib-jshint、grunt-contrib-uglify四个子目录

4)将需要压缩的js文件添加到工程,本例中在跟目录下建立assets文件夹添加文件test1.js和test2.js

/testJsUglify/assets/test1.js
/testJsUglify/assets/test2.js

5)创建grunt任务

创建Gruntfile.js文件,放置在根目录,内容如下:

module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : { //合并文件
domop : {
src: ['assets/test1.js', 'assets/test2.js'], //源文件目录
dest: 'dest/result.js' //目标文件目录,自动创建dest目录
}
},
uglify : { //压缩文件
options : {
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build : {
src : 'dest/result.js',
dest : 'dest/result.min.js'
}
}
});
// 载入concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
grunt.registerTask('default', ['concat', 'uglify']);
};

6)执行grunt任务

  工程根目录执行grunt命令,合并和压缩完成,在dest目录中即可看见result.js和result.min.js文件

五、使用grunt合并压缩CSS文件

说明:合并和压缩过程类似js文件,下面详细说明:

1)创建工程testGruntCSS

2)配置package.json文件,放置工程的根目录

{
"name":"testGruntCSS",
"version": "0.1.0",
"author" :"@wish",
"devDependencies":{
"grunt":"~0.4.0",
"grunt-contrib-concat":"~0.1.1",
"grunt-css":">0.0.0"
}
}

3)安装依赖插件 工程根目录执行 npm install

根目录中增加文件夹node_modules,子目录分别为grunt,grunt-contrib-concat和grunt-css文件夹

4)将需要合并和压缩的css文件添加到工程

/testGruntCSS/assets/css1.css
/tetGruntCSS/assets/css2.css
/tetGruntCSS/assets/css3.css

5)工程根目录下新建Gruntjs文件,内容如下:

module.exports = function(grunt){
grunt.initConfig(
{
pkg:grunt.file.readJSON('package.json'),
concat:{
css:{
src:['assets/*.css'],
dest:'dest/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']);//任务

6)执行grunt任务

进入工程根目录,执行grunt命令,合并压缩完毕

进入dest目录即可看见all.css文件和all.min.css文件

六、自定义Grunt任务

1)新建工程defineGrunt

2)工程根目录配置package.json文件

{

    "name": "defineGrunt",

    "version": "0.1.0",

    "author": "@wish",

    "devDependencies": {

        "grunt": "~0.4.0"

    }

} 

3)安装依赖插件grunt

工程根目录输入 npm install

4) 自定义任务,根目录创建Gruntfile.js文件,内容如下:

module.exports = function(grunt){
grunt.registerTask('myGrunt','输出不同参数',function(arg1,arg2){
if(arguments.length === 0){
grunt.log.writeln('任务'+this.name+'没有传参数');
}else if (arguments.length === 1) { grunt.log.writeln('任务' + this.name + "有一个参数是" + arg1); } else { grunt.log.writeln('任务' + this.name + "有两个参数分别是" + arg1 + ", " + arg2);
})
};

5)测试任务

  1.进入工程目录,输入grunt myGrunt ,输出:任务myGrunt没有传参数;

  2.进入工程目录,输入grunt myGrunt:argument1 ,输出:任务myGrunt有一个参数是argument1;

  3.进入工程目录,输入grunt myGrunt:argument1:argument2 ,输出:任务myGrunt有两个参数,分别是argument1, argument2;

参考:http://home.cnblogs.com/u/snandy/

GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)的更多相关文章

  1. nodejs&colon;grunt使用合并压缩的基本使用

    一.模块化历史 1,nodejs出现:主要解决后端js规范 2,commonjs:这个组织出来一些服务器规范 3,后端规范commonjs应用升级到前端commonjs2:cmd规范(seajs)和完 ...

  2. 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析

    前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...

  3. 使用grunt合并压缩js、css文件

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...

  4. 简单使用grunt、bower工具合并压缩js和css

    前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些 ...

  5. 开箱即用 - Grunt合并和压缩 js&comma;css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  6. grunt 合并压缩js和css文件(二)

    具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...

  7. grunt 压缩js css html 合并等配置与操作详解

    module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...

  8. gulp入门-压缩js&sol;css文件(windows)

    类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 工具/原料 nodejs/npm 方法/步骤 首先要确保pc上装有node,然后在global环境和项目文件中都in ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

随机推荐

  1. trie树的建立方法汇总

    方法一:孩子兄弟表示法 即对于某一个点,记录他的第一个孩子以及他的同父亲的下一个儿子. 具体代码如下: #include <cstdio> #include <cstring> ...

  2. Xcode6中如何使用自定义的类模板

    说到IOS类的模板,有些人感觉很陌生,但是只要有开发过IOS程序的人,其实都用过类的模板,只不过是用的系统自带的类的模板. 例如创建一个ClassTemplateVC继承于UIViewControll ...

  3. 为什么这么多Python框架

    原文:http://bitworking.org/news/Why_so_many_Python_web_frameworks BitWorking This is Joe Gregorio's wr ...

  4. 值传递 &amp&semi; 引用传递

    以下程序的输出结果是? public class Example { String str = new String("good"); char[] ch = { 'a', 'b' ...

  5. Nodejs package&period;json文件介绍

    每个npm的安装包里面都会包含一个package.json,通常这个文件会在包的根目录下. 这个文件很类似于.net项目中的.csproj+AssemblyInfo.cs+App.config文件,主 ...

  6. Python爬虫入门之Urllib库的高级用法

    1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览 ...

  7. python爬虫之Beautiful Soup的基本使用

    1.简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索 ...

  8. 001&period;Linux开机启动过程

    相关Linux启动过程解析,此作为通用启动参考:

  9. AGC 016B&period;Colorful Hats&lpar;思路&rpar;

    题目链接 对于某个元素分类讨论一下,就可以知道n个元素的总颜色种数了. 比如对a[1]分类讨论: 若1的颜色和某个元素相同,则总颜色数为a[1].a[i]要么等于a[1](i与某个元素颜色相同,记个数 ...

  10. 20169207《Linux内核原理与分析》第九周作业

    第九周的实验依旧和往常的一样,主要包括两部分.一是1.阅读学习教材「Linux内核设计与实现 (Linux Kernel Development)」第教材第13,14章.二是学习MOOC「Linux内 ...