标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

<h3 id="h3_1" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:=""><a href="https://my.oschina.net/mdxlcj/blog/1626534" _src="https://my.oschina.net/mdxlcj/blog/1626534">https://my.oschina.net/mdxlcj/blog/1626534</a> </h3> <h3 id="h3_1" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">1、概念理解【预计5分钟】：</h3><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 为什么要讲下这三大工具，Grunt/Gulp/Webpack的作用又是什么？有什么好处吗？<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 答：首先说下我们都了解jquery,但是我们下载的时候通常在官网会看到两种文件，如图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp;&nbsp;&nbsp;&nbsp;<img height="400" src="/ueditor/php/upload/image/20191228/1577526876622679.png" width="959" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">这个时候有两个文件，jquery-3.0.0.js 和&nbsp;jquery-3.0.0.min.js 其实这两个文件是一模一样，里面的功能和方法，主要区别是一个是258kb，另外一个是85kb，为什么功能一样但是一个是258kb，另外一个是85kb呢，请看下面两张图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp; &nbsp; 这一张是jquery-3.0.0.js 内部结构图<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="842" src="/ueditor/php/upload/image/20191228/1577526877160543.png" width="1303" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp; &nbsp; 下面一张是jquery-3.0.0.min.js<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="784" src="/ueditor/php/upload/image/20191228/1577526877558381.png" width="1667" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">最后看到区别了吗，min代表的是占用最小的空间，为项目提高性能上，所以我们一般的话项目上线会用到jquery-3.0.0.min.js这样的文件，但是一般开发中我们也会用到jquery-3.0.0.js 结构清晰的文件，主要是因为我们能够方便学习看jquery的代码，有助于我们开发项目，如果jquery已经很熟练了，你就可以在开发项目的时候直接用到打了包的jquery-3.0.0.min.js，因为在响应速度上会提高。<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 同理，前端攻城狮在自己写css、js、less等相关文件的时候，项目上线如果测试没有bug，客户比较满意，我们都会直接把前端攻城狮写的css、js等相关文件打包，这样在速度性能上就会相应的提高不少，而我们怎么实现这样的功能，就涉及到了今天讲到的三个构建化工具，Grunt、Gulp、Webpack,功能类似，现在最火的是Gulp和Webpack。<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp; &nbsp;&nbsp;******当然还要讲一下，html这种文件是不能打包的*********<span id="OSC_h3_2" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h3 id="h3_2" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">2、环境准备【大约45分钟】：</h3><span id="OSC_h4_3" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_3" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">2.1、我的出发点是针对java后端开发程序员，所以有些思路都是从java角度来讲</h4><span id="OSC_h4_4" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_4" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">2.2、前端开发工具的准备： WebStorm&nbsp; 【预计最长15分钟】</h4><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">官网下载地址：<a href="https://www.jetbrains.com/webstorm/" rel="nofollow" style="box-sizing: inherit; background-color: transparent; color: rgb(65, 131, 196); text-decoration-line: none;">https://www.jetbrains.com/webstorm/</a>&nbsp;然后点击 Download&nbsp;<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">安装过程：博客指导==》&nbsp;<a href="http://blog.csdn.net/u011781521/article/details/53558979" rel="nofollow" style="box-sizing: inherit; background-color: transparent; color: rgb(65, 131, 196); text-decoration-line: none;">http://blog.csdn.net/u011781521/article/details/53558979</a><span id="OSC_h4_5" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_5" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">2.3、NodeJs 环境 （它自带npm，而我们需要用到npm，下载最新版本 8以上就可以，如果不是这个版本请更新，因为接下来将的构建化工具也是最新版本的，所以需要nodejs最新版本的支持）【预计最长30分钟】</h4><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">官网下载地址：<a href="http://nodejs.cn/download/windows" rel="nofollow" style="box-sizing: inherit; background-color: transparent; color: rgb(65, 131, 196); text-decoration-line: none;">http://nodejs.cn/download/windows</a>&nbsp;就去下载后缀名是 .msi<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">安装过程：它的和java jdk 安装类似 &nbsp;https://www.cnblogs.com/lsgxeva/p/7754365.html 这篇博客第四步骤就已经安装成功了，第五步是安装cnpm 因为nodejs 安装成功自带npm，因为nodejs是外国人开发，所以服务器在外国，所以npm这个服务器下载的速度可能会慢一些，所以需要下载一个在国内的服务器，也就是镜像cnpm，在速度上更快，不过不下载也没事，绝大多数体现不出来<span id="OSC_h4_6" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_6" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">3、了解工作：npm &nbsp;【预计15分钟 懂意思就直接进入构建化工具讲解】</h4><span id="OSC_h4_7" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_7" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">3.1&nbsp;、npm是干什么的？</h4><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodejs 安装成功自带npm，npm的意思是node package manager node包管理工具，怎么介绍呢？直接上图，在java的工程中，lib下面的所有包 *.jar 一部分jdk自带，一部分maven工具导入<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="783" src="/ueditor/php/upload/image/20191228/1577526878858637.png" width="578" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">在java中我们除了jdk自带的，剩下的就是通过maven导入，同理在前端工程中，我们想要用到一些工具包或者框架包或者插件包，就需要用到npm来导入，npm就相当于maven的功能<span id="OSC_h4_8" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_8" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">3.2、npm的相关命令</h4><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">（看一下就行，不用直接操作，一会将构建工具再试就可以，有个对命令的预热就好）<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm version &nbsp;<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm -v &nbsp;查看版本<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm search 包名<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm install 包名 &nbsp; 【在当前目录安装包】<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm init &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;【初始化，创建package.json文件，相当于maven工具的pom文件】<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm remove 包名 &nbsp; 【删除包】<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm install 包名 --save &nbsp;安装包并添加到package的依赖中 &nbsp;【这行命令用的比较多】<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm install &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;【下载当前项目所有依赖的包 &nbsp; 一般github下载别人的项目，需要导入包，就是这个命令，那些依赖的包在package.json文件中提现】<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">刚创建项目的package.json:如图<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="400" src="/ueditor/php/upload/image/20191228/1577526878742524.png" width="457" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">他其实就相当于maven工具的pom文件，添加依赖之后如图，这是我从网上的截图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="229" src="/ueditor/php/upload/image/20191228/1577526878914538.png" width="725" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">希望大家对 package.json &nbsp;以及将要用到的npm有一个认识，<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">如果你想要知道package.json所有标签的含义，看这个网址，不过我认为看懂dependecies里面依赖的包就可以了：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">http://javascript.ruanyifeng.com/nodejs/packagejson.html&nbsp;<span id="OSC_h3_9" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h3 id="h3_9" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">4、创建工程【预计5分钟】</h3><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp; &nbsp; WebStorm：file -&gt;project --html5 创建<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="275" src="/ueditor/php/upload/image/20191228/1577526879340744.png" width="599" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="614" src="/ueditor/php/upload/image/20191228/1577526879772370.png" width="989" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">项目创建完成之后如图，是一个空的项目：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="447" src="/ueditor/php/upload/image/20191228/1577526880816770.png" width="661" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">接下来我们创建三个文档，分别来讲解Grunt、Gulp、Webpack相当于java中的多个模块工程一样<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="356" src="/ueditor/php/upload/image/20191228/1577526880841618.png" width="672" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">三个空的文档已经创建完成，进入工具详解下一步。<span id="OSC_h3_10" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h3 id="h3_10" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">5、Grunt详解</h3><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp; &nbsp;简介：&nbsp;基于nodeJs的命令行工具 npm 可对js，css等进行合并和压缩，同时对js文件有检查报错的功能<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp; &nbsp;首先创建一个简单的应用，在创建的过程中让大家明白Grunt<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp;&nbsp;&nbsp;&nbsp;<img height="430" src="/ueditor/php/upload/image/20191228/1577526880701642.png" width="972" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp; &nbsp; 在grunt_mjt文档下创建<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp; &nbsp;&nbsp;|- mjt----------构建生成的文件所在的文件夹 &nbsp; |- src------------源码文件夹 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; |- js---------------js源文件夹 &nbsp; &nbsp; &nbsp; |- css--------------css源文件夹 &nbsp; |- index.html-----页面文件<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""> &nbsp;然后根目录创建package.json ,文件夹grunt_mjt右键选择创建package.json如图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="717" src="/ueditor/php/upload/image/20191228/1577526881395849.png" width="840" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">看下位置：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="435" src="/ueditor/php/upload/image/20191228/1577526881819797.png" width="930" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">在创建Gruntfile.js &nbsp; 只能是这个名字，首字母要大写<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="436" src="/ueditor/php/upload/image/20191228/1577526882364633.png" width="934" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">最后项目结构图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp;|- mjt----------构建生成的文件所在的文件夹 &nbsp; |- src------------源码文件夹 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; |- js---------------js源文件夹 &nbsp; &nbsp; &nbsp; |- css--------------css源文件夹 &nbsp; |- index.html-----页面文件 &nbsp; |- Gruntfile.js---grunt配置文件(注意首字母大写) &nbsp; |- package.json---项目包配置文件<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">这些文件也基本都是空的，接下来安装Grunt ，这个时候就用到了 npm 的命令行，在哪里使用这些命令行呢？<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">看WebStorm工具如图，左下角：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="475" src="/ueditor/php/upload/image/20191228/1577526882954750.png" width="630" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">出现这个项目的路径<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="350" src="/ueditor/php/upload/image/20191228/1577526882333881.png" width="1175" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">进入grunt_mjt这个文件夹下<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="317" src="/ueditor/php/upload/image/20191228/1577526883465272.png" width="758" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">接下来使用npm 命令下载依赖的包<span id="OSC_h4_11" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_11" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">1.首先全局安装</h4><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm install -g grunt-cli&nbsp;<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="217" src="/ueditor/php/upload/image/20191228/1577526883148907.png" width="1386" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><span id="OSC_h4_12" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_12" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">2.安装grunt</h4><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">npm install grunt --save-dev &nbsp;（这个--save会经常用到，频率是最高的一个）下载时间长一些，这个就是我刚刚讲的可能是npm在国外的原因，cnpm可能会快一点。<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="436" src="/ueditor/php/upload/image/20191228/1577526884217473.png" width="1125" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">然后在Gruntfile.js文件中添加内容：<pre style="box-sizing: border-box; font-family: Consolas, Monaco, " andale="" ubuntu="" font-size:="" word-break:="" overflow-wrap:="" overflow:="" position:="" margin-top:="" margin-bottom:="" padding:="" border:="" border-radius:="" line-height:="" background-color:="" color:="">module.exports&nbsp;=&nbsp;function(grunt){
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;1.&nbsp;初始化插件配置
&nbsp;&nbsp;&nbsp;&nbsp;grunt.initConfig({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//主要编码处
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;2.&nbsp;加载插件任务
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;grunt.loadNpmTasks(&#39;grunt-contrib-concat&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;3.&nbsp;注册构建任务
&nbsp;&nbsp;&nbsp;&nbsp;grunt.registerTask(&#39;default&#39;,&nbsp;[]);
};</pre><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">必须添加，不然配置文件缺少，grunt不能启动，看是否成功，命令grunt，出现Done表示安装成功<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="226" src="/ueditor/php/upload/image/20191228/1577526884471833.png" width="925" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">但是这个时候没有安装任何插件，这一点可以再Gruntfile.js中体现，我们只是单纯的安装了一个工具<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">接下来我们安装插件 插件的作用的都有一定的功能，就是java中的类包一样，在java中有的是提供时间的，有的是连接数据库的，同样，Grunt构建化工具的插件也有类似的功能，有的插件是压缩js的，有的是合并js等文件的，接下来介绍几个，并交大家如何使用<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">&nbsp;grunt-contrib-clean——清除文件(打包处理生成的) &nbsp;grunt-contrib-concat——合并多个文件的代码到一个文件中 &nbsp;grunt-contrib-uglify——压缩js文件 &nbsp;grunt-contrib-jshint——javascript语法错误检查； &nbsp;grunt-contrib-cssmin——压缩/合并css文件 &nbsp;grunt-contrib-htmlmin——压缩html文件 &nbsp;grunt-contrib-imagemin——压缩图片文件(无损) &nbsp;grunt-contrib-copy——复制文件、文件夹 &nbsp;grunt-contrib-requirejs**——合并压缩requirejs管理的所有js模块文件 &nbsp;grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">接下来怎么使用这些插件，安装过程都是一样的，我举例两三个给大家看一看<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">进入Grunt官网&nbsp;http://www.gruntjs.net/plugins<span id="OSC_h4_13" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_13" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">点击插件列表</h4><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="844" src="/ueditor/php/upload/image/20191228/1577526885787522.png" width="1279" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">这都是所有的插件，然后点击插件列表中的任何一个，接下来我们讲<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">grunt-contrib-concat——合并多个文件的代码到一个文件中<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">这个插件，然后搜索这个插件，进入这个插件的详情页面，grunt是一个官网名字的前缀，所以我们一般在搜索插件的时候只搜索后面的关键字就可以了，比如：contrib-concat<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="660" src="/ueditor/php/upload/image/20191228/1577526885866820.png" width="1488" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">然后进入该插件的详情页，我们进入他的详情页面主要是因为它给了我们许多提示,如图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="629" src="/ueditor/php/upload/image/20191228/1577526886200482.png" width="1004" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><span id="OSC_h4_14" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""><h4 id="h4_14" style="box-sizing: inherit; font-family: " pingfang="" helvetica="" microsoft="" yahei="" noto="" sans="" cjk="" line-height:="" margin:="" 22px="" 0px="" padding:="" font-size:="" border:="" color:="" white-space:="" background-color:="">这个Getting Started下面的两行代码分别对应的是安装和在配置文件的任务，同样是安装这个插件</h4><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">1、npm install grunt-contrib-concat --save-dev<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">2、在js文件夹下面创建两个js文件，如图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="409" src="/ueditor/php/upload/image/20191228/1577526886999584.png" width="872" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">每个js文件写了对应的就函数，同时我们在项目上线过程中，如果想提高性能的话，当然是要合并我们自己写的js文件然后将它最大程度的压缩。<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">所以这就用到了我们刚刚那个详情页面的那些命令行，第一步已经安装好了，接下来继续看grunt-contrib-concat插件详情页的另外一个标题，如图Usage Examples：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="594" src="/ueditor/php/upload/image/20191228/1577526886251281.png" width="964" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">它已经默认的给我们举了列子，该如何在Gruntfile.js文件中配置这个插件，接下来说一下他们的含义，这是我配置文件中的代码，同时给出项目目录结构，大家就能够很清楚的了解：<pre style="box-sizing: border-box; font-family: Consolas, Monaco, " andale="" ubuntu="" font-size:="" word-break:="" overflow-wrap:="" overflow:="" position:="" margin-top:="" margin-bottom:="" padding:="" border:="" border-radius:="" line-height:="" background-color:="" color:="">concat:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;options:&nbsp;{&nbsp;//可选项配置
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;separator:&nbsp;&#39;;&#39;&nbsp;&nbsp;&nbsp;//使用;连接合并
&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;build:&nbsp;{&nbsp;//此名称任意
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src:&nbsp;&nbsp;[&quot;src/js/*.js&quot;],&nbsp;&nbsp;//合并哪些js文件
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest:&nbsp;&quot;mjt/js/mjt.js&quot;&nbsp;//输出的js文件
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="325" src="/ueditor/php/upload/image/20191228/1577526887395709.png" width="417" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">3.配置插件在配置文件的属性后，再继续配置任务对他进行加载，这个任务是什么，就是在我们执行命令的时候需要一个指示，打个比方吧：我们上面的合并，刚刚配置的属性文件是这样子的，<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="343" src="/ueditor/php/upload/image/20191228/1577526887572756.png" width="878" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">那么我们一般把前面的concat当做这个插件的任务名，然后把对这个任务名就行加载，怎么做，刚刚我们说了那个插件的详情页的代码，如图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="543" src="/ueditor/php/upload/image/20191228/1577526888534349.png" width="1018" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">这行代码就是加载任务，我们把括号里面的换成 concat就好了，最后对他注册，整个配置文件配置图：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="824" src="/ueditor/php/upload/image/20191228/1577526888470651.png" width="1220" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">这个就是在我们合并js文件的插件的整个操作，然后在中断执行grunt操作<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="244" src="/ueditor/php/upload/image/20191228/1577526889146090.png" width="749" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">就可以对两个文件进行合并了。<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">接下来讲压缩，怎么压缩呢，同样的流程，去查找压缩的插件在官网，然后进入详情页，同样找到他的加载命令，加载任务命令，在Gruntfile.js配置的列子，我直接写命令了，直接看。<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">1、安装：npm install grunt-contrib-uglify --save-dev<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">2、配置属性：<pre style="box-sizing: border-box; font-family: Consolas, Monaco, " andale="" ubuntu="" font-size:="" word-break:="" overflow-wrap:="" overflow:="" position:="" margin-top:="" margin-bottom:="" padding:="" border:="" border-radius:="" line-height:="" background-color:="" color:="">uglify:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;my_target:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;mjt/mjt.min.js&#39;:&nbsp;[&#39;mjt/js/mjt.js&#39;]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">3、加载任务：<pre style="box-sizing: border-box; font-family: Consolas, Monaco, " andale="" ubuntu="" font-size:="" word-break:="" overflow-wrap:="" overflow:="" position:="" margin-top:="" margin-bottom:="" padding:="" border:="" border-radius:="" line-height:="" background-color:="" color:="">grunt.loadNpmTasks(&#39;grunt-contrib-uglify&#39;);</pre><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">4、注册：<pre style="box-sizing: border-box; font-family: Consolas, Monaco, " andale="" ubuntu="" font-size:="" word-break:="" overflow-wrap:="" overflow:="" position:="" margin-top:="" margin-bottom:="" padding:="" border:="" border-radius:="" line-height:="" background-color:="" color:="">grunt.registerTask(&#39;default&#39;,&nbsp;[&#39;concat&#39;,&#39;uglify&#39;]);</pre><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">最终如图：<pre style="box-sizing: border-box; font-family: Consolas, Monaco, " andale="" ubuntu="" font-size:="" word-break:="" overflow-wrap:="" overflow:="" position:="" margin-top:="" margin-bottom:="" padding:="" border:="" border-radius:="" line-height:="" background-color:="" color:="">module.exports&nbsp;=&nbsp;function(grunt){
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;1.&nbsp;初始化插件配置
&nbsp;&nbsp;&nbsp;&nbsp;grunt.initConfig({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//主要编码处
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;concat:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:&nbsp;{&nbsp;//可选项配置
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;separator:&nbsp;&#39;;&#39;&nbsp;&nbsp;&nbsp;//使用;连接合并
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;build:&nbsp;{&nbsp;//此名称任意
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src:&nbsp;&nbsp;[&quot;src/js/*.js&quot;],&nbsp;&nbsp;//合并哪些js文件
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest:&nbsp;&quot;mjt/js/mjt.js&quot;&nbsp;//输出的js文件
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uglify:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;my_target:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;mjt/mjt.min.js&#39;:&nbsp;[&#39;mjt/js/mjt.js&#39;]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;grunt.loadNpmTasks(&#39;grunt-contrib-uglify&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;2.&nbsp;加载插件任务
&nbsp;&nbsp;&nbsp;&nbsp;grunt.loadNpmTasks(&#39;grunt-contrib-concat&#39;);

&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;3.&nbsp;注册构建任务
&nbsp;&nbsp;&nbsp;&nbsp;grunt.registerTask(&#39;default&#39;,&nbsp;[&#39;concat&#39;,&#39;uglify&#39;]);
};</pre><p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">这是合并插件和解压缩插件放到一起了<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:="">最后在中断执行默认命令 grunt结果：<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 20px; line-height: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" white-space:="" background-color:=""><img height="268" src="/ueditor/php/upload/image/20191228/1577526889291335.png" width="904" class="zoom-in-cursor" style="box-sizing: border-box; border: 0px; margin: 0px auto; max-width: 80%; height: auto; vertical-align: middle; cursor: zoom-in;"/><span id="OSC_h3_15" style="box-sizing: inherit; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, " apple="" color="" segoe="" ui="" pingfang="" hiragino="" sans="" microsoft="" helvetica="" background-color:=""> <a href="https://my.oschina.net/mdxlcj/blog/1802438" _src="https://my.oschina.net/mdxlcj/blog/1802438">https://my.oschina.net/mdxlcj/blog/1802438</a> 1、gulp篇中文主页: http://www.gulpjs.com.cn/上面那一篇博客我们已经讲述了如何创建工程以及安装所有的环境和准备，如果没有看到的话，链接在下面https://my.oschina.net/mdxlcj/blog/1626534&nbsp;接下来我们的gulp工具，同样也是压缩、合并对他做测试* 创建一个简单的应用，目录结构 &nbsp; ``` &nbsp; |- dist &nbsp; |- src &nbsp; &nbsp; |- js &nbsp; &nbsp; |- css &nbsp; &nbsp; |- less &nbsp; |- index.html &nbsp; |- gulpfile.js-----gulp配置文件 &nbsp; |- package.json &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &quot;name&quot;: &quot;gulp_test&quot;, &nbsp; &nbsp; &nbsp; &quot;version&quot;: &quot;1.0.0&quot; &nbsp; &nbsp; }&nbsp;<img height="401" src="/ueditor/php/upload/image/20191228/1577527218196895.png" width="1047" style="box-sizing: border-box;border: 0px;max-width: 80%;height: auto;vertical-align: middle;cursor: zoom-in"/>如图所示然后我们编写两个js文件mdx1.js 和mdx2.js然后右键创建gulpfile.js 这是gulp工具的特别区分标识然后在Terminal操作脚本行命令&nbsp;全局安装gulp &nbsp;：&nbsp;npm install gulp -g &nbsp;&nbsp;局部安装gulp：&nbsp;npm install gulp --save-dev &nbsp;配置编码: gulpfile.js &nbsp; &nbsp; //引入gulp模块 &nbsp; &nbsp; var gulp = require(&#39;gulp&#39;); &nbsp; &nbsp; //定义默认任务 &nbsp; &nbsp; gulp.task(&#39;任务名&#39;, function() { &nbsp; &nbsp; &nbsp; // 将你的任务的任务代码放在这 &nbsp; &nbsp; }); &nbsp; &nbsp; gulp.task(&#39;default&#39;, [&#39;任务&#39;])//异步执行&nbsp;* 使用gulp插件 &nbsp; * 相关插件: &nbsp; &nbsp; * gulp-concat : 合并文件(js/css) &nbsp; &nbsp; * gulp-uglify : 压缩js文件 &nbsp; &nbsp; * gulp-rename : 文件重命名 &nbsp; &nbsp; * gulp-less : 编译less &nbsp; &nbsp; * gulp-clean-css : 压缩css &nbsp; &nbsp; * gulp-livereload : 实时自动编译刷新 &nbsp; * 重要API &nbsp; &nbsp; * gulp.src(filePath/pathArr) :&nbsp; &nbsp; &nbsp; &nbsp; * 指向指定路径的所有文件, 返回文件流对象 &nbsp; &nbsp; &nbsp; * 用于读取文件 &nbsp; &nbsp; * gulp.dest(dirPath/pathArr) &nbsp; &nbsp; &nbsp; * 指向指定的所有文件夹 &nbsp; &nbsp; &nbsp; * 用于向文件夹中输出文件 &nbsp; &nbsp; * gulp.task(name, [deps], fn)&nbsp; &nbsp; &nbsp; &nbsp; * 定义一个任务 &nbsp; &nbsp; * gulp.watch()&nbsp; &nbsp; &nbsp; &nbsp; * 监视文件的变化&nbsp;刚刚我们创建的两个文件夹，mdx1.js 和mdx2.js<img height="385" src="/ueditor/php/upload/image/20191228/1577527218381863.png" width="711" style="box-sizing: border-box;border: 0px;max-width: 80%;height: auto;vertical-align: middle;cursor: zoom-in"/><pre style="box-sizing: border-box;font-family: Consolas, Monaco, &#39;Andale Mono&#39;, &#39;Ubuntu Mono&#39;, monospace;font-size: 13px;overflow-wrap: normal;overflow: auto;position: relative;margin-top: 0px;margin-bottom: 20px;padding: 1em;border: none;border-radius: 4px;line-height: 1.5;background-color: rgb(246, 246, 246)">(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;add(num1,&nbsp;num2)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;num1&nbsp;+&nbsp;num2;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(add(10,&nbsp;20));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;)();</pre>两个js差不多&nbsp;* 下载插件: &nbsp; &nbsp; &nbsp; npm install gulp-concat gulp-uglify gulp-rename --save-dev &nbsp; &nbsp; * 配置编码 &nbsp; &nbsp; &nbsp; &nbsp; var concat = require(&#39;gulp-concat&#39;); &nbsp; &nbsp; &nbsp; var uglify = require(&#39;gulp-uglify&#39;); &nbsp; &nbsp; &nbsp; var rename = require(&#39;gulp-rename&#39;); &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; gulp.task(&#39;minifyjs&#39;, function() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return gulp.src(&#39;src/js/*.js&#39;) //操作的源文件 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .pipe(concat(&#39;built.js&#39;)) //合并到临时文件 &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .pipe(gulp.dest(&#39;dist/js&#39;)) //生成到目标文件夹 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .pipe(rename({suffix: &#39;.min&#39;})) //重命名 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .pipe(uglify()) &nbsp; &nbsp;//压缩 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .pipe(gulp.dest(&#39;dist/js&#39;)); &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; gulp.task(&#39;default&#39;, [&#39;minifyjs&#39;]);大概就这样，可能这一篇讲的很垃圾，看上一篇，你看懂上一篇这一篇应该就差不多2、Webpack###1、了解Webpack相关 &nbsp;&nbsp; &nbsp;* 什么是webpack &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;* Webpack是一个模块打包器(bundler)。 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源 &nbsp; &nbsp;&nbsp; &nbsp;* 理解Loader &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;* Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;* Loader 本身也是运行在 node.js 环境中的 JavaScript 模块 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;* 它本身是一个函数，接受源文件作为参数，返回转换的结果 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;* loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。 &nbsp; &nbsp;&nbsp; &nbsp;* 配置文件(默认) &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;* webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象 &nbsp;&nbsp; &nbsp;* 插件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;* 插件件可以完成一些loader不能完成的功能。 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;* 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;* CleanWebpackPlugin: 自动清除指定文件夹资源 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;* HtmlWebpackPlugin: 自动生成HTML文件并 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;* UglifyJSPlugin: 压缩js文件 &nbsp;&nbsp; &nbsp; ###2、学习文档 :&nbsp; &nbsp; * webpack官网: http://webpack.github.io/ &nbsp; * webpack2文档(英文): https://webpack.js.org/ &nbsp; * webpack2文档(中文): https://doc.webpack-china.org/ ###3、开启项目 &nbsp; * 初始化项目： &nbsp;&nbsp; &nbsp; &nbsp;* 生成package.json文件 &nbsp;&nbsp; &nbsp; &nbsp;*&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;``` &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;{ &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&quot;name&quot;: &quot;webpack_test&quot;, &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&quot;version&quot;: &quot;1.0.0&quot; &nbsp;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;``` &nbsp; * 安装webpack &nbsp;&nbsp; &nbsp;- npm install webpack -g &nbsp;//全局安装 &nbsp; &nbsp; - npm install webpack --save-dev &nbsp;//局部安装 ###4、编译打包应用 &nbsp; * 创建入口src/js/ : entry.js &nbsp;&nbsp; &nbsp;- document.write(&quot;entry.js is work&quot;); &nbsp; * 创建主页面: dist/index.html &nbsp; &nbsp; -<script type="text/javascript" src="bundle.js"></script> &nbsp; * 编译js &nbsp; &nbsp; - webpack src/js/entry.js dist/bundle.js &nbsp; &nbsp; * 查看页面效果 ###5、添加js/json文件 &nbsp;&nbsp; &nbsp;* 创建第二个js: src/js/math.js &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;```&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;export function square(x) { &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return x * x; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;} &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;export function cube(x) { &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return x * x * x; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;} &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp; &nbsp; * 创建json文件: src/json/data.json &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;{ &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&quot;name&quot;: &quot;Tom&quot;, &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&quot;age&quot;: 12 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;} &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp; &nbsp; * 更新入口js : entry.js &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;import {cube} from &#39;./math&#39; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;import data from &#39;../json/data.json&#39; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;//注意data会自动被转换为原生的js对象或者数组 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;document.write(&quot;entry.js is work &quot;); &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;document.write(cube(2) + &#39; &#39;); &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;document.write(JSON.stringify(data) + &#39; &#39;) &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp; &nbsp; * 编译js: &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;webpack src/js/entry.js dist/bundle.js &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp; &nbsp; * 查看页面效果 ###6、使用webpack配置文件 &nbsp;&nbsp; &nbsp;* 创建webpack.config.js &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;const path = require(&#39;path&#39;); //path内置的模块，用来设置路径。 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;module.exports = { &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;entry: &#39;./src/js/entry.js&#39;, &nbsp; // 入口文件 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;output: { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 输出配置 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;filename: &#39;bundle.js&#39;, &nbsp; &nbsp; &nbsp;// 输出文件名 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;path: path.resolve(__dirname, &#39;dist&#39;) &nbsp; //输出文件路径配置 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp; &nbsp; * 配置npm命令: package.json &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&quot;scripts&quot;: { &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&quot;build&quot;: &quot;webpack&quot; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}, &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp; &nbsp; * 打包应用 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;npm run build &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;``` ###7、打包css和图片文件 &nbsp; &nbsp;* 安装样式的loader &nbsp; &nbsp; ``` &nbsp; &nbsp; npm install css-loader style-loader --save-dev &nbsp; &nbsp; npm install file-loader url-loader --save-dev &nbsp;&nbsp; &nbsp;补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。 &nbsp; &nbsp; ``` &nbsp; * 配置loader &nbsp; &nbsp; ``` &nbsp; &nbsp; module: { &nbsp; &nbsp; &nbsp; rules: [ &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: /\.css$/, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; use: [ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;style-loader&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;css-loader&#39; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ] &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: /\.(png|jpg|gif)$/, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; use: [ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: &#39;url-loader&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; limit: 8192 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ] &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; ] &nbsp; &nbsp; } &nbsp; &nbsp; ``` &nbsp; * 向应用中添加2张图片: &nbsp; &nbsp; * 小图: img/logo.png &nbsp; &nbsp; * 大图: img/big.jpg &nbsp; &nbsp;&nbsp; &nbsp; * 创建样式文件: src/css/test.css &nbsp; &nbsp; ``` &nbsp; &nbsp; body { &nbsp; &nbsp; &nbsp; background: url(&#39;../img/logo.jpg&#39;) &nbsp; &nbsp; } &nbsp; &nbsp; ``` &nbsp; * 更新入口js : entry.js &nbsp;&nbsp; &nbsp;- import &#39;../css/test.css&#39; &nbsp; * 添加css样式&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; #box1{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;width: 300px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;height: 300px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;background-image: url(&quot;../image/logo.jpg&quot;); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#box2{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;width: 300px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;height: 300px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;background-image: url(&quot;../image/big.jpg&quot;); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp; * index.html添加元素 &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; * 执行打包命令： &nbsp; &nbsp; ``` &nbsp; &nbsp; npm run build &nbsp; &nbsp; ``` &nbsp; * 发现问题： &nbsp;&nbsp; &nbsp; &nbsp;* 大图无法打包到entry.js文件中，index.html不在生成资源目录下。 &nbsp;&nbsp; &nbsp; &nbsp;* 页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到 &nbsp;&nbsp; &nbsp; &nbsp;* 解决办法： &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;* 使用publicPath : &#39;dist/js/&#39; //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。 &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;* 将index.html放在dist/js/也可以解决。 ###8、自动编译打包 &nbsp; &nbsp; * 利用webpack开发服务器工具: webpack-dev-server &nbsp; &nbsp; * 下载 &nbsp; &nbsp; &nbsp; &nbsp; - npm install --save-dev webpack-dev-server &nbsp; &nbsp; * webpack配置 &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;devServer: { &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;contentBase: &#39;./dist&#39; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; * package配置 &nbsp; &nbsp; &nbsp; &nbsp; - &quot;start&quot;: &quot;webpack-dev-server --open&quot; &nbsp; &nbsp; * 编译打包应用并运行 &nbsp; &nbsp; &nbsp; &nbsp; - npm start ###9、使用webpack插件 &nbsp; * 常用的插件 &nbsp; &nbsp; * 使用html-webpack-plugin根据模板html生成引入script的页面 &nbsp; &nbsp; * 使用clean-webpack-plugin清除dist文件夹 &nbsp; &nbsp; * 使用uglifyjs-webpack-plugin压缩打包的js文件 &nbsp; * 下载 &nbsp; &nbsp; ``` &nbsp; &nbsp; npm install --save-dev &nbsp;html-webpack-plugin clean-webpack-plugin &nbsp; &nbsp; ``` &nbsp; * webpack配置&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;); //自动生成html文件的插件 &nbsp; &nbsp; &nbsp; &nbsp; const CleanWebpackPlugin = require(&#39;clean-webpack-plugin&#39;); //清除之前打包的文件 &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;plugins: [ &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;new HtmlWebpackPlugin({template: &#39;./index.html&#39;}), &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;new CleanWebpackPlugin([&#39;dist&#39;]), &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; * 创建页面: index.html&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<meta charset="UTF-8"/> &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<title>webpack test</title> &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * 打包运行项目 &nbsp; &nbsp; ``` &nbsp; &nbsp; npm run build &nbsp; &nbsp; npm start<ins data-ad-client="ca-pub-7090564139599510" data-ad-slot="2321828009" data-adsbygoogle-status="done" style="box-sizing: inherit;display: inline-block;width: 728px;height: 90px"><ins id="aswift_0_expand" style="box-sizing: inherit;display: inline-table;border: none;height: 90px;padding: 0px;position: relative;visibility: visible;width: 728px;background-color: transparent"></ins></ins><audio controls="controls" style="display: none;"></audio>