Grunt教程-前端自动化
来源:互联网 发布:直播免费刷人气软件 编辑:程序博客网 时间:2024/05/16 15:50
为何选择Grunt?
压缩、编译、单元测试、代码检查等 我们需要自动化,不必重复劳动,减小工作量。为何选择Grunt呢?好像是没有更好的选择了。
准备工作
安装node.js
Grunt基于Node.js,安装之前要先安装Node.js。
brew install node
更新npm
sudo npm install npm -g
安装 grunt-cli
安装 grunt-cli 并不等于安装了 Grunt 任务运行器 Grunt CLI 的任务是运行 Gruntfile 指定的 Grunt 版本。 这样就可以在一台电脑上同时安装多个版本的 Grunt。(没有懂,俺直接实战)
npm install -g grunt-cli
Grunt必备文件
创建文件必须创建文件夹,我建立了一个
test
的文件夹,一个标准的grunt
项目中必须有两个文件。package.json:用于保存项目元数据。 Gruntfile.js : 用于配置或定义任务、加载 Grunt 插件。
在test1文件夹中创建这两个文件吧。那么文件中写什么内容呢。我们首先来关注一下package.json写什么内容
{ "name": "test", "version": "1.0.0"}
运行
在项目的根目录下运行下面的命令
npm install
命令执行过程
npm WARN package.json test1@1.0.0 No descriptionnpm WARN package.json test1@1.0.0 No repository field.npm WARN package.json test1@1.0.0 No README data
提示说没有描述信息没有README之类的 在根目录添加一个 README.md 文件
添加内容
在 package.json 中添加下面内容之后
{ "name": "test", "version": "1.0.0", "description": "测试的例子", "repository": { "type": "git", "url": "https://github.com/JSLite/JSLite.git" }}
于是乎万事大吉了
安装 Grunt 插件
在此项目中安装 Grunt 插件
sudo npm install grunt --save-dev
package.json的文件内容发现多了 devDependencies
的信息
目录多了一个 node_modules
的文件夹
{ "name": "test", "version": "1.0.0", "description": "测试的例子", "repository": { "type": "git", "url": "https://github.com/JSLite/JSLite.git" }, "devDependencies": { "grunt": "^0.4.5" }}
运行 npm install <module> --save-dev
,不仅会安装指定的 模块,还会自动添加到 devDependencies
区域中,且包括 版本范围。
grunt-contrib-uglify
插件用途:压缩js,css文件 插件名称:grunt-contrib-uglify
安装
sudo npm install grunt-contrib-uglify --save-dev
安装成功之后 在package.json的文件内容中的 devDependencies
的信息又增加了
"devDependencies": { "grunt": "^0.4.5", "grunt-contrib-uglify": "^0.8.0" }
使用方法
还记得我们上面说一个Grunt项目要两个必须的文件一个
package.json
和Gruntfile.js
,注意大小写,Linux区分大小写的,创建Gruntfile.js
并写入如下内容
// 包装函数module.exports = function(grunt) { // 任务配置,所有插件的配置信息 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // uglify插件的配置信息 uglify: { options: { banner: '/*! This is uglify test - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */', beautify: true,//是否压缩 mangle: false, //不混淆变量名 compress:true,//打开或关闭使用默认选项源压缩。 }, app_task: { files: { 'build/app.min.js': ['lib/index.js', 'lib/test.js'] } } } }); // 告诉grunt我们将使用插件 grunt.loadNpmTasks('grunt-contrib-uglify'); // 告诉grunt当我们在终端中输入grunt时需要做些什么 grunt.registerTask('default', ['uglify']);};
分析
- banner:在
build/app.min.js
文件生成内容如日期什么的 - files:将
lib
目录中的js
压缩合并生成到build
目录中生成app.min.js
运行grunt
输入命令下面命令,好了,我的没有错误正常的。如果有错误,会有错误日志,自己分析哦。
grunt
grunt-contrib-watch
插件用途:监控文件变化并自动运行grunt的watch插件 插件名称:grunt-contrib-watch
安装
sudo npm install grunt-contrib-watch --save-dev
使用
修改
Gruntfile.js
initConfig 中添加了
// watch插件的配置信息 watch: { another: { files: ['lib/*.js'], tasks: ['uglify'], options: { // Start another live reload server on port 1337 livereload: 1337 } } }
增加了一行
grunt.loadNpmTasks('grunt-contrib-watch');
数组中添加了watch
grunt.registerTask('default', ['uglify','watch']);
添加了watch后,完整的 Gruntfile.js
// 包装函数module.exports = function(grunt) { // 任务配置,所有插件的配置信息 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // uglify插件的配置信息 uglify: { options: { banner: '/*! This is uglify test - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */' }, app_task: { files: { 'build/app.min.js': ['lib/index.js', 'lib/test.js'] } } }, // watch插件的配置信息 watch: { another: { files: ['lib/*.js'], tasks: ['uglify'], options: { // Start another live reload server on port 1337 livereload: 1337 } } } }); // 告诉grunt我们将使用插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); // 告诉grunt当我们在终端中输入grunt时需要做些什么 grunt.registerTask('default', ['uglify','watch']);};
grunt-contrib-watch
安装 stylus
sudo npm install grunt-contrib-watch --save-dev
修改 Gruntfile.js
initConfig
中添加了
stylus:{ build: { options: { linenos: false, compress: false, banner: '\/** \n * <%= pkg.name %> - <%= pkg.description %>\n * version <%= pkg.version %> \n * author <%= pkg.author %> \n * date <%= grunt.template.today() %> \n**/\n' }, files: [{ 'css/historyDetail.css': 'styl/historyDetail.styl' }] }},
下面添加
grunt.loadNpmTasks('grunt-contrib-stylus');
paths
将自动使用@import来引入一些Stylus
文件,比如一些Mixin
集合,放在一个Stylus文件中进行维护,写在paths中后,就可以在每个Stylus
文件中调用它们。define
可以定义一些全局变量,然后在Stylus
中使用,但我不喜欢使用这个配置,而是更喜欢把全局变量放在一个单独的Stylus
文件中,然后将这个文件加入paths的数组中。一句话,把所有不会直接产出CSS的Stylus
代码分成若干个Stylus
文件,然后全部添加到paths
中,这样在所有Stylus
文件中都可以随时调用了,但要注意这些Stylus
文件的调用关系和使用先后顺序。
compress
及 linenos
是两个Boolean值,用来控制是否压缩处理后的CSS代码以及是否在CSS代码中保留注释。
banner
是一个字符串,会被放置在CSS文件的最前面,一般我用来写注释,比如
banner: '\/** \n * <%= pkg.name %> - <%= pkg.description %>\n * version <%= pkg.version %> \n * author <%= pkg.author %> \n * date <%= grunt.template.today() %> \n**/\n'
firebug
将控制是否使用一个Firebug
的Stylus
插件FireStylus for Firebug
,可以在Firefox中调试Stylus。
use
可以引入一些Stylus
的其他grunt
插件。
常用模块设置
grunt-contrib-clean
:删除文件。npm>>grunt-contrib-compass
:使用compass编译sass文件。npm>>grunt-contrib-concat
:合并文件。npm>>grunt-contrib-copy
:复制文件。npm>>grunt-contrib-cssmin
:压缩以及合并CSS文件。npm>>grunt-contrib-imagemin
:图像压缩模块。npm>>grunt-contrib-jshint
:检查JavaScript语法。npm>>grunt-contrib-uglify
:压缩以及合并JavaScript文件。npm>>grunt-contrib-watch
:监视文件变动,做出相应动作。npm>>grunt-contrib-stylus
:stylus编写styl输出css npm>>
- 前端自动化Grunt教程
- Grunt教程-前端自动化
- Grunt教程-前端自动化
- 前端自动化工具grunt
- Grunt前端自动化工具
- Grunt打造前端自动化工作流
- Grunt打造前端自动化工作流
- Grunt打造前端自动化工作流
- 前端自动化构建工具Grunt
- grunt-beginner 前端自动化工具
- Grunt-beginner前端自动化工具
- 前端自动化工具grunt介绍
- 【Grunt】前端自动化构建工具
- 前端自动化构建工具Grunt
- grunt 前端自动化构建工具
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
- LeetCode (5)Longest Palindromic Substring
- 并查集和最小生成树的总结
- 数据结构学习:单向链表的模板类实现
- Easy 6 Merge Two Sorted Lists(21)
- bootstrap的less源码学习之button组件控制
- Grunt教程-前端自动化
- HTML中data的属性
- 计算机网络中传输速率 带宽 吞吐量三者的区别
- 大盗阿福
- BZOJ 1260: [CQOI2007]涂色paint 区间DP
- Harmonic Number
- selenium+java+testng分层设计(二)
- C++智能指针(三)总结
- android应用安装失败