项目构建---grunt

什么是项目构建?

•     编译项目中的js, sass, less
•     合并js/css等资源文件
•     压缩js/css/html等资源文件
•     JS语法的检查
• ......

构建工具的作用?

•     简化项目构建, 自动化完成构建(当我们修改源文件后不需要自己重新编译打包，构建工具自动帮我们处理）

构建工具

项目构建工具有以下几种 grunt、gulp以及webpack,接下来一一讲解。

•  Grunt

        http://www.gruntjs.net/(中文官网)
        http://www.cnblogs.com/wangfupeng1988/p/4561993.html(教程)

•     Gulp

        http://www.gulpjs.com.cn/(中文官网)
        http://www.jianshu.com/p/cc1cb9a5650c(教程)
        http://www.ydcss.com/archives/category/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7 (详细教程)

•     Webpack

        http://webpack.github.io/ (英文官网)
        http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/(系列教程)
        https://github.com/nimojs/webpack-book(webpack入门指南)
        http://www.jianshu.com/p/bb48898eded5(教程)

Grunt介绍

 中文主页 : http://www.gruntjs.net/
grunt是一套前端自动化构建工具，一个基于nodeJs的命令行工具,它是一个任务运行器, 配合其丰富强大的插件
常用功能:
  合并文件(js/css)
  压缩文件(js/css)
  语法检查(js)
  less/sass预编译处理
  其它...

grunt特点：
- 执行任务是同步的
- 不同的任务插件的配置是不同的，设置配置比较繁琐。
- 注意：加载对应的插件，否则任务找不到。

grunt入门教程：

1.安装nodejs, 查看版本

node -v

2.创建一个简单的应用grunt_test

|- build----------构建生成的文件所在的文件夹
|- src------------源码文件夹
|- js---------------js源文件夹
|- css--------------css源文件夹
|- index.html-----页面文件
|- Gruntfile.js---grunt配置文件(注意首字母大写)
|- package.json---项目包配置文件
{
"name": "grunt_test",
"version": "1.0.0"
}

3.全局安装 grunt-cli

npm install -g grunt-cli 

4.安装grunt

npm install grunt --save-dev

5.运行构建项目命令

grunt

 提示 Warning: Task "default" not found，因为缺少一个配置文件及任务

6.配置文件: Gruntfile.js

此配置文件本质就是一个node函数类型模块。
配置编码包含3步:
1. 初始化插件配置
2. 加载插件任务
3. 注册构建任务

 //包装函数
module.exports = function(grunt){
// 1. 初始化插件配置
grunt.initConfig({
//主要编码处
});
// 2. 加载插件任务
// grunt.loadNpmTasks('grunt-contrib-concat');
// 3. 注册构建任务，告诉grunt,当我们在终端输入grunt时，grunt需要做哪些事情
// dafault默认任务，grunt启动时就执行的任务
grunt.registerTask('default', []);
};

7.重新运行grunt

grunt

8.Grunt插件介绍

1.grunt官网的插件列表页面 http://www.gruntjs.net/plugins
2.插件分类:
  grunt团队贡献的插件 : 插件名大都以contrib-开头
   第三方提供的插件 : 大都不以contrib-开头

3.常用的插件:

 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——实时监控文件变化、调用相应的任务重新执行

9.合并js: 使用concat插件

下载插件

npm install grunt-contrib-concat --save-dev

10.编码

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);
})();

11.配置: Gruntfile.js

配置任务:

grunt.initConfig({
concat: {
options: {
separator: ';',//合并后文件之间的连接符 ;
},
dist: {//此名称任意
src: ['src/js/*.js'],//找目标原文件，合并哪些js文件
dest: 'build/js/build.js',//输出的文件路径及文件名字
},
}
});

加载插件:

grunt.loadNpmTasks('grunt-contrib-concat');

注册任务:

 grunt.registerTask('default', ['concat']);

12.运行grunt

grunt
//会在build下生成一个built.js

13.文件合并后需要压缩，压缩js: 使用uglify插件

下载：

 npm install grunt-contrib-uglify --save-dev

14.配置: Gruntfile.js

配置任务:

 pkg : grunt.file.readJSON('package.json'),//获取package.json文件中的信息
uglify : {
options: {
//不是必须的
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
build: {
files: {
'build/js/build.min.js': ['build/js/build.js']
// 'build/js/built-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js']
}
}
}

加载任务:

grunt.loadNpmTasks('grunt-contrib-uglify');

注册任务:

grunt.registerTask('default', ['concat', 'uglify']);

15.运行

grunt
//会在build下生成一个压缩的js文件

17.js语法检查: 使用jshint插件

 npm install grunt-contrib-jshint --save-dev

18.在项目根目录下创建 .jshintrc文件

当运行jshint插件时，插件向该文件索要信息，此文件不能有注释，运行时，删掉注释

{
"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"]
}

19.测试jshint,修改src/js/test1.js

 (function () {
function add(num1, num2) {
num1 = num1 + num3
return num1 + num2;
}
console.log(add(10, 20));
})();

20. Gruntfile.js

配置任务:

jshint : {
options: {
jshintrc : '.jshintrc' //指定配置文件
},
build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
}

加载任务:

grunt.loadNpmTasks('grunt-contrib-jshint');

注册任务:

grunt.registerTask('default', ['concat', 'uglify', 'jshint']);

21运行

 grunt

 会指出js不规范的地方,提示变量未定义和语句后未加分号 -->修改后重新编译

22.使用cssmin插件

 npm install grunt-contrib-cssmin --save-dev

23编码css

test1.css

 #box1 {
width: 100px;
height: 100px;
background: red;
}

test2.css

 #box2 {
width: 200px;
height: 200px;
background: blue;
}

24.index.html

 <link rel="stylesheet" href="build/css/output.min.css">
<div id="box1"></div>
<div id="box2"></div>

25. 配置 : 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', ['concat', 'uglify', 'jshint', 'cssmin']);

26.grunt

grunt

在build/css/下生成output.min.css

27.使用watch插件（真正实现自动化）

npm install grunt-contrib-watch --save-dev

配置 : Gruntfile.js

 watch : {
scripts : {
files : ['src/js/*.js', 'src/css/*.css'],//监视的文件
tasks : ['concat', 'jshint', 'uglify', 'cssmin'],//文件变化就执行的任务
options : {spawn : false}
//增量更新---全量更新
}
}

加载任务:

grunt.loadNpmTasks('grunt-contrib-watch');

注册任务:

将watch任务加载到默认任务中，我们开发测试可以这样配置

grunt执行任务 ，同步

	grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin'，'watch']);

项目上线时可以改成这样

grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
grunt.registerTask('myWatch', ['default', 'watch']);

28.运行

grunt 

控制台提示watch已经开始监听, 修改保存后自动编译处理

最后

以上就是悲凉河马为你收集整理的项目构建---grunt的全部内容，希望文章能够帮你解决项目构建---grunt所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。