构建工具-Grunt快速入门

一、什么是项目构建

• 编译项目中的js、sass、less等文件
• 合并js、css等资源文件
• 压缩js、css、html等资源文件
• js预发检查等
• …

二、构建工具的作用

简单一句话就是：简化项目构建，自动化完成项目构建

三、Grunt简单介绍

中文网址：grunt中文网地址

简介：它是一套前端自动化构建工具，一个基于nodejs的命令行工具，它是一个任务运行器，配合其丰富强大的插件

常用功能：

• 合并文件（js/css）
• 压缩文件（js/css）
• 语法检查（js）
• less/sass预编译处理
• 。。。。。

查看node版本：

node -v

创建一个最简单的应用grunt_test

全局安装 grunt-cli

npm i -g grunt-cli grunt

安装grunt

npm i grunt --save-dev

此时执行grunt，会报错，提示Unable to find Gruntfile，所以需要配置下Gruntfile配置文件

配置Gruntfile文件

module.exports = function(grunt) {

  grunt.initConfig({    //初始化配置grunt任务
  
  });
  
  grunt.loadNpmTasks('grunt-contrib-jshint');   //grunt执行任务时去加载对应的任务插件
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', []）;   //注册grunt的默认任务

};

此时，再执行下grunt，就不会报错，会提示Done，说明基本配置没有问题

grunt常用插件

• grunt-contrib-clean ：清除文件（打包处理生成的）
• grunt-contrib-concat：合并多个文件代码到一个文件
• grunt-contrib-uglify：压缩js文件
• grunt-contrib-jshint：js语法检查
• grunt-contrib-cssmin：压缩/合并css文件
• grunt-contrib-htmlmin：压缩html
• grunt-contrib-imagemin：压缩图片
• grunt-contrib-copy：复制文件、文件夹
• grunt-contrib-watch：实时监听文件变化、调用相应任务重新执行

接下来我们就分别来看下常用插件的使用场景

1、合并js（用grunt-contrib-concat插件）

先在src/js目录下新建两个a.