Ubuntu14.04 Grunt 搭建自动化的web前端开发环境

最新推荐文章于 2023-07-25 17:45:22 发布

Mr_扛扛

最新推荐文章于 2023-07-25 17:45:22 发布

阅读量3.4k

点赞数

分类专栏：前端技术文章标签： web前端开发自动化

本文链接：https://blog.csdn.net/u011521019/article/details/48744435

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、写在前面

这篇文章主要介绍一下Grunt 搭建自动化的Web前端开发环境。
如果转载，请保留作者信息。
邮箱地址：jpzhang.ht@gmail.com

二、Grunt介绍

Grunt 是一个基于任务的 JavaScript 项目命令行构建工具。类似Java业界的Ant工具一样。实际上，你可以把grunt理解为一组task，对于需要反复重复的任务，例如：合并若干js（concat）、压缩js（min）、测试js（qunit）等等，grunt可以减轻你的劳动，简化你的工作。Grunt运行在Node.js平台之上，通过npm安装。它包含两个组件： grunt-cli和grunt。

三、环境准备

node.js 安装
Grunt运行离不开NodeJS和NPM。因此要使用Grunt首要的条件，你的系统需要安装NodeJS和NPM。
Ubuntu 14.04自带的Node.js版本太老，且我试了下安装并不成功，所以需要添加Node.js PPA安装最新版的Node.js，在终端中执行：
sudo add-apt-repository ppa:chris-lea/node.js

注意：有可能会把报错”add-apt-repository: command not found “,执行:
sudo apt-get install python-software-properties
sudo apt-get install software-properties-common

sudo apt-get update
sudo apt-get install nodejs
安装完成后执行node -v命令,查看是否安装成功，

$ node -v
v0.10.37

如上显示，则表示安装成功。可以升级至最新稳定版本：
首先安装n模块：npm install -g n
升级node.js到最新稳定版:n stable
最后重启服务器即可升级至最新版本。
CLI 安装
在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo权限或者作为管理员来执行以下命令。

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。
安装过程中，命令行会出现一个转动的小横线，表示正在联网加载,安装完成显示：

/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.7)
└── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)

四、开始一个实例

到此需要准备的环境已经完毕，接下去我们就以一个简单的示例来介绍。
创建Node.js项目：

grunttest
├──src # 存放CSS、Js原文件
├──build ＃存放压缩之后的CSS、Js文件
├──Gruntfile.js
└──package.json

package.json 标准的json格式，用来配置项目版本号以及依赖项，初始化如下：

{
  "name": "grunttest",＃项目名称
  "version": "1.0.0",＃版本号
  "devDependencies": {#用来配置项目依赖包。
     }
}

安装 grunt

命令：npm install grunt –save-dev
“—save-dev”在当前目录安装grunt的同时，把grunt保存为这个目录的开发依赖项。配置package.json:”devDependencies”中就会存储开发依赖项。
执行完成：
npm WARN package.json grunttest@1.0.0 No description
npm WARN package.json grunttest@1.0.0 No repository field.
npm WARN package.json grunttest@1.0.0 No README data
npm WARN package.json grunttest@1.0.0 No license field.
grunt@0.4.5 node_modules/grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.9
├── getobject@0.1.0
├── eventemitter2@0.4.14
├── rimraf@2.2.8
├── colors@0.6.2
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── nopt@1.0.10 (abbrev@1.0.7)
├── minimatch@0.2.14 (sigmund@1.0.1, lru-cache@2.7.0)
├── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
├── glob@3.1.21 (inherits@1.0.2, graceful-fs@1.2.3)
├── grunt-legacy-log@0.1.2 (grunt-legacy-log-utils@0.1.1, underscore.string@2.3.3, lodash@2.4.2)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.16)

测试是否安装成功：命令 grunt，如果输出如下，即表示安装成功。

Warning: Task “default” not found. Use –force to continue.
Aborted due to warnings.

查看package.json ，发现 “devDependencies”: {} 自动添加了依赖项grunt，”^0.4.5”表示版本号：
```
{
"name": "grunttest",
"version": "1.0.0",
"devDependencies": {
"grunt": "^0.4.5",
}
}
```
并且在项目根目录下生成“node_modules”文件夹，其中有一个“grunt”文件夹，“node_modules”文件夹用来存放项目所依赖的包，其中“grunt“文件夹就是grunt的源码。

通过Gruntfile.js配置grunt，
```
//包装函数
module.exports = function(grunt) {
//任务配置，所有插件的配置信息
grunt.initConfig({
//获取package.json的信息
pkg:grunt.file.readJSON("package.json")

});
//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序），
//默认输入grunt的时候就是自动执行default中定义的任务，也可以自定义任务列表，
//例如grunt.registerTask('dev', []);，即输入grunt dev执行的就是我们在dev中定义的任务。
grunt.registerTask('default', []);
};
```
刚部署玩grunt时测试时输入grunt报错是因为没有定义默认的任务，配置完再执行就没有错误。

安装 grunt-contrib-cssmin
cssmin插件的功能就是压缩css代码，即**.min.css压缩版
插件地址： https://www.npmjs.com/package/grunt-contrib-cssmin
命令： npm install grunt-contrib-cssmin –save-dev
配置Gruntfile.js：

//包装函数
module.exports = function(grunt) {
//任务配置，所有插件的配置信息
grunt.initConfig({
//获取package.json的信息
pkg:grunt.file.readJSON("package.json"),

//cssmin插件的配置信息
cssmin: {
    options: {
      sourceMap: true
    },
    files: {
      expand: true,
      cwd: 'src/', //设置需要压缩的目录
      src: ['*.css'],//设置需要压缩的文件
      dest: 'build/',//压缩之后文件的保存目录
      ext: '.min.css'//压缩之后形成文件的后缀
    }
}
});
//告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-cssmin');

//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）
grunt.registerTask('default', ['cssmin']);
};

测试： src/目录下编辑css文件
src/test.css
运行grunt命令，即在build目录下生成压缩之后的css文件：test.min.css

安装 grunt-contrib-uglify
uglify插件的功能就是压缩javascript代码，即**.min.js 压缩版。
插件地址： https://www.npmjs.com/package/grunt-contrib-uglify
命令： npm install grunt-contrib-uglify –save-dev
配置Gruntfile.js：

//包装函数
module.exports = function(grunt) {
//任务配置，所有插件的配置信息
grunt.initConfig({
//获取package.json的信息
pkg:grunt.file.readJSON("package.json"),

//uglify插件的配置信息
uglify: {
  options: {
    stripBanners: true,
    banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' //设置压缩之后文件第一行显示的内容
  },
  build: {
    src: "src/test.js",//需要压缩的文件
    dest: "build/<%=pkg.name%>-<%=pkg.version%>.js.min.js" //压缩之后的文件名以及存放目录
  }
},

//cssmin插件的配置信息
cssmin: {
    options: {
      sourceMap: true
    },
    files: {
      expand: true,
      cwd: 'src/',
      src: ['*.css'],
      dest: 'build/',
      ext: '.min.css'
    }
},
});

//告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');

//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）
grunt.registerTask('default', ['uglify', 'cssmin']);
};

测试： src/目录下编辑js文件
src/test.js
运行grunt命令，即在build目录下生成压缩之后的js文件：grunttest-1.0.0.js.min.js

安装 grunt-contrib-watch
watch将监控哪些文件的变化，以及这些文件一旦变化，要立即执行哪些插件功能。
插件地址： https://www.npmjs.com/package/grunt-contrib-watch
命令： npm install grunt-contrib-watch –save-dev
配置Gruntfile.js：

//包装函数
module.exports = function(grunt) {
//任务配置，所有插件的配置信息
grunt.initConfig({
//获取package.json的信息
pkg:grunt.file.readJSON("package.json"),

//uglify插件的配置信息
uglify: {
  options: {
    stripBanners: true,
    banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
  },
  build: {
    src: "src/test.js",
    dest: "build/<%=pkg.name%>-<%=pkg.version%>.js.min.js"
  }
},

//cssmin插件的配置信息
cssmin: {
    options: {
      sourceMap: true
    },
    files: {
      expand: true,
      cwd: 'src/',
      src: ['*.css'],
      dest: 'build/',
      ext: '.min.css'
    }
},
//watch插件的配置信息
watch: {
  scripts: {
    files: ['src/*.js', 'src/*.css'], // 监控的文件目录
    tasks: ['uglify', 'cssmin'], // 监控到文件发生变化之后执行的任务列表
    options: {
      spawn: false,
    },
  },
}

});

//告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');

//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）
grunt.registerTask('default', ['uglify', 'cssmin', 'watch']);
};

测试： watch将监控src文件夹下所有js文件和css文件的变化，一旦变化，则立即执行cssmin和uglify两个插件功能。
运行grunt命令，控制台提示watch已经开始监听。此时要想停止，按ctrl + c即可。

Running “watch” task
Waiting…

修改src/test.js,
结果显示，watch检查到了test.js文件的变化，而且通过uglify执行压缩代码，并继续监听直至结束。

更多插件
进入grunt官网的插件列表页面 http://www.gruntjs.net/plugins ，我们能看到grunt到目前位置的所有插件。现在里面有4560个插件，插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。
你所需要的大多数task都已经作为Grunt插件被开发了出来，并且每天都有更多的插件诞生。

Contrib-jshint——javascript语法错误检查；
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
Contrib-clean——清空文件、文件夹；
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
Contrib-less——编译less文件
karma——前端自动化测试工具
……

五、结束

到此，使用grunt搭建自动化Web开发环境已经介绍完成，在实际开发过程中，不需要把依赖包源码提交到代码仓库，只要提交package.json文件，package.json的“devDependencies”记录了这个系统的开发依赖项以及具体版本号，通过nodejs的npm（“npm install“）即可批量安装。

Mr_扛扛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ubuntu14.04 Grunt 搭建自动化的web前端开发环境

Ubuntu14.04 Grunt 搭建自动化的web前端开发环境一、写在前面这篇文章主要介绍一下Grunt 搭建自动化的Web前端开发环境。如果转载，请保留作者信息。邮箱地址：jpzhang.ht@gmail.com二、grunt介绍Grunt 是一个基于任务的 JavaScript 项目命令行构建工具。类似Java业界的Ant工具一样。实际上，你可以把grunt理解
复制链接

扫一扫