前端自动化构建工具Grunt
一、了解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官网(https://nodejs.org/),单击INSTALL下载node安装包,默认安装。安装完成后,进入对应目录,会发现nodejs文件夹下面有npm,直接用npm安装相环境既可。
二、安装Grunt
参考Grunt官网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 <module> --save-dev。此命令不光安装了<module>,还会自动将其添加到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官网地址:https://nodejs.org/
grunt中文官网地址:http://www.gruntjs.net/
grunt官网插件地址: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
前端自动化构建工具Grunt相关推荐
- 常用的前端自动化构建工具gulp/grunt/fis --简介
常用的前端自动化构建工具 之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力,那么我们会了解 Gulp Grunt fIS 用法基本相同:都是通过 ...
- 前端自动化构建工具--Plop
前端自动化构建工具 ---- Plop 前言:周末在家学习了一些前端自动化构建工具,Generator.Plop.Grunt.Gulp,我还以为目前用不到这些工具,没想到周一一上班看到这周任务是要开发 ...
- 前端自动化构建工具之webpack入门——简单入门
写在前面 这篇博客也是参照别人的webpack入门,加上自己的一些操作,还有我在此过程中遇到的困难.如果是已经入门的或者这方面的高手,请绕行,也请勿吐槽. 正文开始 我们为什么要学习webpack 首 ...
- 前端自动化构建工具合集之gulp-姜威-专题视频课程
前端自动化构建工具合集之gulp-2984人已学习 课程介绍 Gulp自动化构建系统,使用node.js串流让构建更的组合,利用外挂(plugins)使应用更灵活,简单的四个命令,组合 ...
- 前端自动化构建工具合集之webpack-姜威-专题视频课程
前端自动化构建工具合集之webpack-13573人已学习 课程介绍 通过使用前端构建工具,搭建自动化前端开发,生产环境. 课程收益 讲师介绍 姜威 更多讲师课程 ...
- 前端自动化构建工具:用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
- 前端自动化构建工具介绍
前端自动化构建工具有: Bower,Gulp,Grunt,node,yeoman... 自动化构建是作为前端工程化中重要的部分,承担着若干需要解决的环节.包括流程管理.版本管理.资源管理.组件化.脚手 ...
- 自动化构建工具Grunt、Gulp
使用grunt完成项目的自动化构建 一.准备工作 grunt快要退出历史舞台了,简单学习下 mkdir my-grunt yarn init --yes //创建package模块 yarn add ...
- gulp前端自动化构建工具:常用插件介绍及使用
Gulp是基于Node.js的一个构建工具(自动任务运行器),开发者可以使用它构建自动化工作流程(前端集成开发环境).一些常见.重复的任务,例如:网页自动刷新.CSS预处理.代码检测.压缩图片.等 ...
最新文章
- eclipse opengl java_OpenGL 之 Eclipse 开发环境搭建 | 学步园
- linux下apache和jboss集群和负载均衡
- 关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization
- Spring和AspectJ的领域驱动设计
- 【CDS技术揭秘系列 01】阿里云CDS-OSS容灾大揭秘
- 集成学习—Adaboost(理解与应用)
- db.serverStatus()
- windows下怎么打开psql命令
- Java中的数组元素排序
- h5移动端开发之禁用微信浏览器字体大小设置
- OC 如何读取plist文件
- 新手iso系统怎么安装 新手安装iso镜像文件详细步骤
- 无法连接GitHub完整解决方案
- 一套牛逼哄哄的开源的监控系统(附源码)
- 2021第一学期学习笔记01
- form-create-desniger 自定义拖拽表单
- misra c编码规范个人整理总结/misra c 2012中文版-个人总结-【方便查询】
- 免疫组库数据分析(二):Excel 分析免疫组库数据
- 习题 2-2 韩信点兵 (hanxin)(C语言版)
- 金蝶EAS WEB端多选F7赋值、保存与展示