项目构建---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 + num3return 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相关推荐
- 实战录 | 浅谈前端项目构建与优化
<实战录>导语 云端卫士的新栏目<实战录>将会定期分享一些我们的工程师伙伴们在产品研发的过程中总结的实践经验,希望对于热爱技术且关注安全领域的受众有所裨益.本期分享人为云端卫士 ...
- 项目构建之maven篇:2.HelloWorld项目构建过程
文件结构说明: 项目构建生命周期: 清理 编译 測试 打包 执行 部署 清理与编译 hello\pom.xml POM:Project Object Model,项目对象模型 pom.xml与ant的 ...
- 深度学习(五十六)tensorflow项目构建流程
tensorflow项目构建流程 博客:http://blog.csdn.net/hjimce 微博:黄锦池-hjimce qq:1393852684 一.构建路线 个人感觉对于任何一个深度学习库 ...
- 基于koajs的web项目构建-心得篇
2019独角兽企业重金招聘Python工程师标准>>> 根据 基于koajs的web项目构建-入门篇 所描述的,建立了项目的基本目录结构,接下来的工作便是编码,编译,测试,发布.做为 ...
- Spring Cloud云服务架构 - common-service 项目构建过程
2019独角兽企业重金招聘Python工程师标准>>> 我们将对common-service整个项目进行剖析,将整个构建的流程给记录下来,让更多的关注者来参考学习. 首先在构建spr ...
- ReSharper“无法解析符号”,即使在项目构建时
本文翻译自:ReSharper "Cannot resolve symbol" even when project builds My Tools: 我的工具: Visual St ...
- Maven学习总结(2)——Maven项目构建过程练习
Maven学习总结(二)--Maven项目构建过程练习 上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自动化构建项目的过程 一.创建Maven项目 1.1.建 ...
- 前端资源构建-Grunt环境搭建
前端资源构建-Grunt 随着前端开发的复杂度越来越高,前端页面动辄上几十个js,十几个html页面.用户打开一个页面需要加载一堆的css,js,html文件,对于有大量用户的web应用来说,既消耗服 ...
- Java B2B2C多用户商城 springcloud架构- common-service 项目构建过程(七)...
我们将对common-service整个项目进行剖析,将整个构建的流程给记录下来,让更多的关注者来参考学习. 首先在构建spring cloud的common-service之前,我们需要准备的技术: ...
最新文章
- 7月30日 举办专注于微服务的.NET Conf Focus
- Spring总结四:IOC和DI 注解方式
- bootstrapV4.6.0实现标签页(改造v3.3.7)- 代码篇
- 包装类 与 简单集合框架
- 设计灵感|信息图表海报竟然能设计的这么有趣!
- PostgreSql之在group by查询下拼接列字符串
- Android简易聊天室软件(HTTP实现)
- Crust “方舟计划”播报# 3|Crust社区杰出贡献节点——20 位“开拓者”诞生
- 汽车 php 深圳,深圳小汽车增量调控管理信息系统查询官网
- 自主安装IPA文件到iPhone上
- gg修改器修改内购_僵尸炮艇生存修改金币教程
- php cookie 注入,LiveZilla 'setCookieValue()'函数PHP对象注入漏洞
- 计算机网络 | 实验二 WINPCWP编程
- 洛谷 P3387 缩点 题解
- 录制课件时,小米笔记本电脑,外接耳麦, 麦克风没那有声音,怎么办?
- 高精度定位系统精细测距定位
- java ee字体_[分享] 23种漂亮的字体代码,
- ISO8583包[详细说明]
- SOLID原理的详细信息。
- 20189200余超 2018-2019-2 移动平台应用开发实践第三周作业
热门文章
- 抑郁症跟普通的抑郁情绪有何区别?
- OGeek网络安全挑战赛圆满收官,OPPO倾力培养高校尖端人才
- 华里士公式的推导及其推广
- Qt 调用 chm格式的文件
- 农夫山泉联动九九趣拿节:做打动年轻人的新品
- file.mkdir()与file.mkdirs() 区别
- win10开始菜单、任务栏等右键无反应解决办法
- 你所不知道的抖音赚钱方法,原来可以这样玩!
- MTK6757的OTG线连接鼠标后,鼠标右键改为返回功能
- 计算机在材料科学应用主要有,《计算机在材料科学与工程中的应用(专科)》武汉理工大学20春作业二...