-
Grunt介绍
中文主页 : http://www.gruntjs.net/
是一套前端自动化构建工具,一个基于nodeJs的命令行工具
它是一个任务运行器,配合其丰富强大的插件
-
常用功能:
合并文件(js/css)
压缩文件(js/css)
语法检查(js)
less/sass预编译处理
其它...
-
安装nodejs,查看版本
node -v
-
创建一个简单的应用grunt_test
|- build----------构建生成的文件所在的文件夹 |- src------------源码文件夹 |- js---------------js源文件夹 |- css--------------css源文件夹 |- index.html-----页面文件 |- Gruntfile.js---grunt配置文件(注意首字母大写) |- package.json---项目包配置文件 { "name": "grunt_test","version": "1.0.0" }
-
全局安装 grunt-cli
npm install -g grunt-cli
-
安装grunt
npm install grunt --save-dev
-
运行构建项目命令
grunt //提示 Warning: Task "default" not found
-
配置文件: Gruntfile.js
此配置文件本质就是一个node函数类型模块
-
配置编码包含3步:
初始化插件配置
加载插件任务
注册构建任务
-
基本编码:
module.exports = function(grunt){ // 1. 初始化插件配置 grunt.initConfig({ //主要编码处 }); // 2. 加载插件任务 // grunt.loadNpmTasks('grunt-contrib-concat'); // 3. 注册构建任务 grunt.registerTask('default',[]); };
命令: grunt //提示成功,但没有任何效果(还没有使用插件定义任务)
-
Grunt插件介绍
grunt官网的插件列表页面 http://www.gruntjs.net/plugins
-
插件分类:
grunt团队贡献的插件 : 插件名大都以contrib-开头
第三方提供的插件 : 大都不以contrib-开头
-
常用的插件:
grunt-contrib-clean——清除文件(打包处理生成的)
grunt-contrib-concat——合并多个文件的代码到一个文件中
grunt-contrib-uglify——压缩js文件
grunt-contrib-jshint——javascript语法错误检查;
grunt-contrib-cssmin——压缩/合并css文件
grunt-contrib-htmlmin——压缩html文件
grunt-contrib-imagemin——压缩图片文件(无损)
grunt-contrib-copy——复制文件、文件夹
grunt-contrib-requirejs——合并压缩requirejs管理的所有js模块文件
grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行
-
合并js: 使用concat插件
-
命令:
npm install grunt-contrib-concat --save-dev
-
编码:
-
src/js/test1.js
(function () { function add(num1,num2) { return num1 + num2; } console.log(add(10,20)); })();
-
src/js/test2.js
(function () { var arr = [2,3,4].map(function (item,index) { return item+1; }); console.log(arr); })();
-
-
配置: Gruntfile.js
-
配置任务:
concat: { options: { //可选项配置 separator: ';' //使用;连接合并 },build: { //此名称任意 src: ["src/js/*.js"],//合并哪些js文件 dest: "build/js/built.js" //输出的js文件 } }
-
加载插件:
grunt.loadNpmTasks('grunt-contrib-concat');
-
注册任务:
grunt.registerTask('default',['concat']);
-
命令:
grunt //会在build下生成一个built.js
-
-
-
压缩js: 使用uglify插件
-
下载
npm install grunt-contrib-uglify --save-dev
-
配置: Gruntfile.js
-
配置任务:
pkg : grunt.file.readJSON('package.json'),uglify : { options: { //不是必须的 banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */' },build: { files: { 'build/js/built-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js'] } } }
-
加载任务:
grunt.loadNpmTasks('grunt-contrib-uglify');
-
注册任务:
grunt.registerTask('default',['concat','uglify']);
-
命令:
grunt //会在build下生成一个压缩的js文件
-
-
-
js语法检查: 使用jshint插件
-
命令:
npm install grunt-contrib-jshint --save-dev
-
编码: .jshintrc
{ "curly": true,"eqeqeq": true,"eqnull": true,"expr" : true,"immed": true,"newcap": true,"noempty": true,"noarg": true,"regexp": true,"browser": true,"devel": true,"node": true,"boss": false,//不能使用未定义的变量 "undef": true,//语句后面必须有分号 "asi": false,//预定义不检查的全局变量 "predef": [ "define","BMap","angular","BMAP_STATUS_SUCCESS"] }
-
修改src/js/test1.js
(function () { function add(num1,num2) { num1 = num1 + num3 return num1 + num2; } console.log(add(10,20)); })();
-
配置 : Gruntfile.js
-
配置任务:
jshint : { options: { jshintrc : '.jshintrc' //指定配置文件 },build : ['Gruntfile.js','src/js/*.js'] //指定检查的文件 }
-
加载任务:
grunt.loadNpmTasks('grunt-contrib-jshint');
-
注册任务:
grunt.registerTask('default','uglify','jshint']);
-
命令:
grunt //提示变量未定义和语句后未加分号 -->修改后重新编译
-
-
-
使用cssmin插件
-
安装:
npm install grunt-contrib-cssmin --save-dev
-
编码:
-
test1.css
#box1 { width: 100px; height: 100px; background: red; }
-
test2.css
#box2 { width: 200px; height: 200px; background: blue; }
-
index.html
<link rel="stylesheet" href="build/css/output.min.css"> <div id="box1"></div> <div id="box2"></div>
-
-
配置 : Gruntfile.js
-
配置任务:
cssmin:{ options: { shorthandCompacting: false,roundingPrecision: -1 },build: { files: { 'build/css/output.min.css': ['src/css/*.css'] } } }
-
加载任务:
grunt.loadNpmTasks('grunt-contrib-cssmin');
-
注册任务:
grunt.registerTask('default','jshint','cssmin']);
-
命令:
grunt //在build/css/下生成output.min.css
-
-
-
使用watch插件(真正实现自动化)
命令: npm install grunt-contrib-watch --save-dev
-
配置 : Gruntfile.js
-
配置任务:
watch : { scripts : { files : ['src/js/*.js','src/css/*.css'],tasks : ['concat','cssmin'],options : {spawn : false} } }
-
加载任务:
grunt.loadNpmTasks('grunt-contrib-watch');
-
注册任务:
grunt.registerTask('default','watch']); 改进:grunt.registerTask('myWatch',['default','watch']);
-
命令:
grunt //控制台提示watch已经开始监听,修改保存后自动编译处理
-