前端自动化构建工具grunt -凯发k8官方网

一、了解gurnt（http://www.open-open.com/lib/view/open1433898272036.html）

grunt 是一个基于任务的javascript工程命令行构建工具。
grunt和grunt插件，是通过npm安装并管理的，npm是node.js的包管理器。
了解grunt前，首先要准备两件事：
1、了解npm（node package manager）：npm是一个nodejs包管理和分发工具，已经成为了非官方的发布node模块（包）的标准。
2、安装node：进入nodejs凯发k8官方网官网（https://nodejs.org/），单击install下载node安装包，默认安装。安装完成后，进入对应目录，会发现nodejs文件夹下面有npm,直接用npm安装相环境既可。

二、安装grunt

参考grunt凯发k8官方网官网http://www.gruntjs.net/
安装grunt：npm install -g grunt-cli
注意，安装grunt-cli并不等于安装了grunt！grunt cli的任务很简单：调用与gruntfile在同一目录中 grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的grunt。

三、简单实用grunt

一个新的grunt项目，必须在根目录下要有两个文件：package.json 和 gruntfile.js
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和grunt插件，放置于devdependencies配置段内。
gruntfile: 此文件被命名为 gruntfile.js 或 gruntfile.coffee，用来配置或定义任务（task）并加载grunt插件的。
1. npm init命令会创建一个基本的package.json文件。或者手动创建，如下：

{"name": "my-project-name","description":"test grunt ...","version": "0.1.0" }

2. 安装grunt和grunt插件（https://github.com/gruntjs）
向已经存在的package.json 文件中添加grunt和grunt插件的最简单方式是通过：
npm install --save-dev。此命令不光安装了，还会自动将其添加到devdependencies 配置段中。
3. grunt --help 命令将列出所有可用的任务

四、简单项目流程示例

清空编译工作区 -> copy源文件到编译工作区 -> 合并文件 -> 压缩文件 -> 加时间戳
clean -> copy -> concat -> min -> md5 
1. grunt-contrib-clean：clear files and folders.
2. grunt-contrib-copy：copy files and folders.
3. grunt-contrib-concat：concatenate files.
4. grunt-contrib-cssmin：compress css files.
   grunt-contrib-uglify：minify files with uglifyjs.
   grunt-contrib-htmlmin：minify html.
5. grunt-filerev：static asset revisioning through file content hash
第一步：创建package.json

{"name":"test_grunt","description":"test grunt ...","version":"0.0.1" }

第二步：安装对应插件（加上--save-dev，会在package.json中加上devdependencies依赖）

npm install grunt-contrib-clean --save-dev npm install grunt-contrib-copy --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-cssmin --save-dev npm install grunt-contrib-uglify --save-dev

第三步：创建gruntfile.js，添加要使用插件配置

'use strict'; module.exports = function(grunt) {// 构建的初始化配置grunt.initconfig({//配置具体任务});// 载入要使用的插件grunt.loadnpmtasks('grunt-contrib-clean');// 注册刚配置好的任务grunt.registertask('default', ['clean']); }

五、地址

nodejs凯发k8官方网官网地址：https://nodejs.org/
grunt中文凯发k8官方网官网地址：http://www.gruntjs.net/
grunt凯发k8官方网官网插件地址：https://github.com/gruntjs
六、源码
// package.json

{"name": "test_grunt","description": "test grunt ...","version": "0.0.1","devdependencies": {"grunt": "^0.4.5","grunt-contrib-clean": "^0.6.0","grunt-contrib-concat": "^0.5.1","grunt-contrib-copy": "^0.8.0","grunt-contrib-cssmin": "^0.12.3","grunt-contrib-uglify": "^0.9.1"} }


//gruntfile.js

'use strict'; module.exports = function(grunt) {// 构建的初始化配置grunt.initconfig({/* 配置具体任务 */pkg: grunt.file.readjson('package.json'),dirs: {src: 'path',dest: 'dest/<%= pkg.name %>/<%= pkg.version %>',},// clean任务（删除dest/test_grunt/0.0.1 目录下非min的文件）clean: {js: ["<%= dirs.dest %>/*.js", "!<%= dirs.dest %>/*.min.js"],css: ["<%= dirs.dest %>/*.css", "!<%= dirs.dest %>/*.min.css"]},// copy任务（拷贝path目录下的文件到dest目录）copy: {main: {files: [// includes files within path{expand: true, src: ['path/*'], dest: '<%= dirs.dest %>/', filter: 'isfile'},]}},// concat任务（将dest目录下的a.js和b.js合并为built.js）concat: {options: {separator: '\n',},concatcss: {src: ['<%= dirs.dest %>/a.css', '<%= dirs.dest %>/path/b.css'],dest: '<%= dirs.dest %>/built.css',},concatjs: {src: ['<%= dirs.dest %>/a.js', '<%= dirs.dest %>/b.js'],dest: '<%= dirs.dest %>/built.js',}},// cssmin任务（压缩css）cssmin: {target: {files: [{expand: true,cwd: '<%= dirs.dest %>',src: ['*.css', '!*.min.css'],dest: '<%= dirs.dest %>',ext: '.min.css'}]}},// uglify任务（压缩js）uglify: {options: {mangle: {except: ['jquery', 'backbone']}},my_target: {files: {'<%= dirs.dest %>/bulit.min.js': ['<%= dirs.dest %>/*.js']}}}});// 载入要使用的插件grunt.loadnpmtasks('grunt-contrib-clean');grunt.loadnpmtasks('grunt-contrib-copy');grunt.loadnpmtasks('grunt-contrib-concat');grunt.loadnpmtasks('grunt-contrib-cssmin');grunt.loadnpmtasks('grunt-contrib-uglify');// 注册刚配置好的任务grunt.registertask('cls', ['clean']);grunt.registertask('cpy', ['copy']);grunt.registertask('con', ['concat']);grunt.registertask('cmpcss', ['cssmin']);grunt.registertask('cmpjs', ['uglify']);grunt.registertask('default', ['copy','concat','cssmin','uglify','clean']); }

ps：
1.  自己配置的任务名称，不能和插件名称一样，否则会造成无限循环

2.  插件名称，除最外层外，中间层名称可自定义

转载于:https://www.cnblogs.com/aliwa/p/6888718.html

总结

以上是凯发k8官方网为你收集整理的前端自动化构建工具grunt的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。