脚本宝典收集整理的这篇文章主要介绍了

Gulp 制作写 Demo 小工具

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <ul> <li><a href="https://github.com/negivup/gulpdemo" rel="nofollow noreferrer" target="_blank">项目地址</a></li> </ul> <p>既然重新学习了 Gulp,那索性就再把以前用 Gulp 写的东西拿出来,重新写一遍。这次写的时候要把要点记录下来,不然以后忘了就没法回忆了。</p> <p>因为 Gulp 现在使用没有以前那么多了,所以就不写复杂的应用了。这次写一个简单的 Demo 处理工具,只是为了把 PSD 转成 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 的时候,减少一些重复性操作。</p> <p>由于写 Demo 的时候,只去关心页面结构和对应的样式,因此,不去考虑 js 相关的内容。主要实现以下几个功能点 :</p> <ul> <li>在 Gulp 的配置文件中使用 ES6 语法书写代码</li> <li>将 <a href="http://www.js-code.com/tag/flex" title="flex" target="_blank">flex</a>ible.js 和 <a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>.css 注入到每个 html 文件的头部</li> <li>使用 SASS 写样式</li> <li>自动增加浏览器前缀,处理样式兼容</li> <li>自动将 px 转成 rem</li> <li>压缩样式文件</li> <li>压缩图片</li> <li>去除 .html 文件中的注释</li> <li>浏览器实时刷新</li> <li>去除页面中的无用样式</li> <li>每次打包前,删除已存在的目标目录</li> </ul> <p>为了这几个小目标,下面开始逐步实现这些功能点。</p> <blockquote><p>使用的 Gulp 版本是 <code>3.9.1</code>。</p></blockquote> <h2 id="articleHeader0">准备工作</h2> <p>创建一个 <a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm init -y" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ npm <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>it -y</code></pre> <p>安装 Gulp 作为项目的开发依赖 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ yarn add gulp -D" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ yarn add gulp -D</code></pre> <p>在项目开始之前,首先需要搭建目录结构。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=". ├── gulpfile.babel.js gulp 的配置文件 ├── package.json ├── src Demo 源代码存放的目录 │ ├── common 公共文件存放的目录,将来注入到html文件中 │ │ ├── flexible.min.js │ │ └── reset.css │ ├── css │ │ ├── _none.scss │ │ └── useful.scss │ ├── html │ │ └── index.html │ └── imgs │ └── test.png ├── task 任务文件夹 │ ├── task-clean.js 删除 dist 目录 │ ├── task-css.js 处理 css 的任务 │ ├── task-default.js 默认任务 │ ├── task-html.js 处理 html 的任务 │ └── task-img.js 处理图片的任务 └── yarn.lock" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>. ├── <span class="hljs-selector-tag">gulpfile</span><span class="hljs-selector-class">.<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a></span><span class="hljs-selector-class">.js</span> <span class="hljs-selector-tag">gulp</span> 的配置文件 ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a></span><span class="hljs-selector-class">.json</span> ├── <span class="hljs-selector-tag">src</span> <span class="hljs-selector-tag">Demo</span> 源代码存放的目录 │ ├── <span class="hljs-selector-tag">common</span> 公共文件存放的目录,将来注入到<span class="hljs-selector-tag">html</span>文件中 │ │ ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/flex" title="浏览关于“flex”的文章" target="_blank" class="tag_link">flex</a>ible</span><span class="hljs-selector-class">.min</span><span class="hljs-selector-class">.js</span> │ │ └── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a></span><span class="hljs-selector-class">.css</span> │ ├── <span class="hljs-selector-tag">css</span> │ │ ├── _<span class="hljs-selector-tag">none</span><span class="hljs-selector-class">.scss</span> │ │ └── <span class="hljs-selector-tag">useful</span><span class="hljs-selector-class">.scss</span> │ ├── <span class="hljs-selector-tag">html</span> │ │ └── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.html</span> │ └── <span class="hljs-selector-tag">imgs</span> │ └── <span class="hljs-selector-tag">test</span><span class="hljs-selector-class">.png</span> ├── <span class="hljs-selector-tag">task</span> 任务文件夹 │ ├── <span class="hljs-selector-tag">task-clean</span><span class="hljs-selector-class">.js</span> 删除 <span class="hljs-selector-tag">dist</span> 目录 │ ├── <span class="hljs-selector-tag">task-css</span><span class="hljs-selector-class">.js</span> 处理 <span class="hljs-selector-tag">css</span> 的任务 │ ├── <span class="hljs-selector-tag">task-<a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span><span class="hljs-selector-class">.js</span> 默认任务 │ ├── <span class="hljs-selector-tag">task-html</span><span class="hljs-selector-class">.js</span> 处理 <span class="hljs-selector-tag">html</span> 的任务 │ └── <span class="hljs-selector-tag">task-img</span><span class="hljs-selector-class">.js</span> 处理图片的任务 └── <span class="hljs-selector-tag">yarn</span><span class="hljs-selector-class">.lock</span></code></pre> <h2 id="articleHeader1">gulpfile.js 中支持 ES6</h2> <p>如果需要在 gulpfile.js 中使用 ES6 相关语法,就需要把 gulpfile.js 改成 gulpfile.<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>.js。更改文件名之后,在文件中写入 ES6 的代码。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import gulp from 'gulp'; gulp.task('default', () => console.log(123));" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> gulp <span class="hljs-keyword">from</span> <span class="hljs-string">'gulp'</span>; gulp.task(<span class="hljs-string">'default'</span>, () =&gt; <span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span>));</code></pre> <p>运行命令之后,发现,报错了。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ ./node_modules/.bin/gulp [14:15:34] Failed to load external module @babel/register [14:15:34] Failed to load external module babel-register [14:15:34] Failed to load external module babel-core/register [14:15:34] Failed to load external module babel/register" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">$ ./<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules/.bin/gulp [14:15:34] Failed to load external module @babel/register [14:15:34] Failed to load external module babel-register [14:15:34] Failed to load external module babel-core/register [14:15:34] Failed to load external module babel/register</code></pre> <p>出现这个错误是因为使用 ES6 语法后,需要经过 <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a> 进行转码后才能正常执行任务,因此,要配置 babel 相关的内容。</p> <p>首先是需要安装 babel 的依赖 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ yarn add babel-cli babel-preset-env -D" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ yarn add babel-cli babel-preset-env -D</code></pre> <p>babel 在运行的时候,需要读取其配置文件中的信息,将对应的代码进行转译。所以,<code>.babelrc</code> 文件必不可少。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;presets&quot;: [&quot;env&quot;] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json">{ <span class="hljs-attr">"presets"</span>: [<span class="hljs-string">"env"</span>] }</code></pre> <p>再次运行 Gulp 命令的时候,会发现还是有错误。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ ./node_modules/.bin/gulp [14:20:33] Failed to load external module @babel/register" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">$ ./node_modules/.bin/gulp [14:20:33] Failed to load external module @babel/register</code></pre> <p>这个错误就很奇怪了,命名已经安装了 babel 的依赖了,为什么还会有这个错误呢?这是因为在解析 <code>.babel.js</code> 文件中,加载 babel 组件不正确造成的。babel-core/register 已经过时了,现在使用 babel-register 来代替了。如果要修复这个问题,就需要修改 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules 中 <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>terpret 模块中的 <code><a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.js</code>。</p> <p>将 <code>module: '@babel/register'</code> 改成 <code>module: 'babel-register'</code>。具体修改的位置就是下面代码中的第三行 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" '.babel.js': [ { module: '@babel/register'," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs java"><code> <span class="hljs-string">'.babel.js'</span>: [ { <span class="hljs-keyword">module</span>: <span class="hljs-string">'@babel/register'</span>,</code></pre> <p>在 gulpfile.babel.js 中,我们将 task 目录下的文件加载到该配置文件中,这个时候需要用到的模块是 <code>require-dir</code>。</p> <p>在项目中安装 <code>require-dir</code> 模块 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ yarn add require-dir -D" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ yarn add require-dir -D</code></pre> <p>模块完成之后,改造 gulpfile.babel.js。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import requireDir from 'require-dir'; requireDir('./task');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> requireDir <span class="hljs-keyword">from</span> <span class="hljs-string">'require-dir'</span>; requireDir(<span class="hljs-string">'./task'</span>);</code></pre> <h2 id="articleHeader2">删除目标目录</h2> <p>一般情况下,把最终生成好的文件放入 dist 目录中,那么目标目录就是 dist。</p> <p>删除文件夹或文件,一般使用 <code>del</code> 模块,这个模块异步方法返回的是一个 <a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e 对象。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// ./task/task-clean.js gulp.task('clean', () => {<br /> return del('./dist').then(paths => {<br /> // 如果 paths 长度为 0,说明文件夹不存在<br /> if (paths.length) {<br /> console.log(paths + ' 删除成功')<br /> } else {<br /> console.log('文件夹不存在');<br /> }<br /> });<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// ./task/task-clean.js</span> gulp.task(<span class="hljs-string">'clean'</span>, () =&gt; { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> del(<span class="hljs-string">'./dist'</span>).then(<span class="hljs-function"><span class="hljs-params">paths</span> =&gt;</span> { <span class="hljs-comment">// 如果 paths 长度为 0,说明文件夹不存在</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (paths.<a href="http://www.js-code.com/tag/length" title="浏览关于“length”的文章" target="_blank" class="tag_link">length</a>) { <span class="hljs-built_in">console</span>.log(paths + <span class="hljs-string">' 删除成功'</span>) } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'文件夹不存在'</span>); } }); });</code></pre> <p>通过上面的代码创建的 clean 任务,在执行任务 clean 的时候,就可以把 dist 目录进行删除了。</p> <h2 id="articleHeader3">处理图片</h2> <p>图片的处理相对就比较简单了,只需要压缩图片并拷贝到对应的目录中就可以了。压缩图片使用的模块是 <code>gulp-<a href="http://www.js-code.com/tag/image" title="image" target="_blank">image</a>min</code>。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="gulp.task('imgs', () => {<br /> return gulp.src([<br /> './src/imgs/*.jpg',<br /> './src/imgs/*.png',<br /> './src/imgs/*.gif',<br /> './src/imgs/*.svg'<br /> ], {<br /> base: 'src'<br /> })<br /> .pipe(imagemin())<br /> .pipe(gulp.dest('./dist'));<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">gulp.task(<span class="hljs-string">'imgs'</span>, () =&gt; { <span class="hljs-keyword">return</span> gulp.src([ <span class="hljs-string">'./src/imgs/*.jpg'</span>, <span class="hljs-string">'./src/imgs/*.png'</span>, <span class="hljs-string">'./src/imgs/*.gif'</span>, <span class="hljs-string">'./src/imgs/*.svg'</span> ], { <span class="hljs-attr">base</span>: <span class="hljs-string">'src'</span> }) .pipe(<a href="http://www.js-code.com/tag/image" title="浏览关于“image”的文章" target="_blank" class="tag_link">image</a>min()) .pipe(gulp.dest(<span class="hljs-string">'./dist'</span>)); });</code></pre> <p>通过上面的代码创建的 imgs 任务,在执行任务 imgs 的时候,就可以把 <code>./src/imgs</code> 中的内容压缩并拷贝到 <code>./dist/imgs</code> 中了。</p> <h2 id="articleHeader4">处理 html</h2> <p>处理 html 文件的时候,就稍微复杂点了。因为牵涉到压缩和替换。如果要替换 html 中的内容,使用的模块是 <code>gulp-replace</code>;如果需要压缩 html 文件,那么就需要使用 <code>gulp-htmlmin</code>。</p> <p>在这里,需要替换 html 中引入 <a href="http://www.js-code.com/tag/flex" title="flex" target="_blank">flex</a>ible.js 的地方为对应的内容,就需要写成下面的形式 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>=" .pipe(replace('<script type=&quot;text/javascript&quot; src=&quot;../common/flexible.min.js&quot;></script>', () => {<br /> // 获取 flexible.min.js 文件中的内容<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> flexibleData = fs.readFileSync(path.resolve(__dir<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>, '../src/common/flexible.min.js'));<br /> // 返回一个流,写入共下一个内容使用<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> `<script type=&quot;text/javascript&quot;>n${flexibleData}</script>`;<br /> }))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(replace(<span class="hljs-string">'&lt;script type="<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script" src="../common/flexible.min.js"&gt;&lt;/script&gt;'</span>, () =&gt; { <span class="hljs-comment">// 获取 flexible.min.js 文件中的内容</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> flexibleData = fs.readFileSync(path.resolve(__dir<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>, <span class="hljs-string">'../src/common/flexible.min.js'</span>)); <span class="hljs-comment">// 返回一个流,写入共下一个内容使用</span> <span class="hljs-keyword">return</span> <span class="hljs-string">`&lt;script type="text/javascript"&gt;n<span class="hljs-subst">${flexibleData}</span>&lt;/script&gt;`</span>; }))</code></pre> <p>同时初始化 css 的样式也要注入到 html 文件中,这个时候就要把 html 中对应的路径替换成对应的文件内容 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>=" .pipe(replace('<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../common/reset.css&quot;>', () => {<br /> // 获取 <a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>.css 文件中的内容<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> flexibleData = fs.readFileSync(path.resolve(__dir<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>, '../src/common/reset.css'));<br /> // 返回一个流,写入共下一个内容使用<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> `</p> <style type=&quot;text/css&quot;>n${flexibleData}</style> <p>`;<br /> }))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(replace(<span class="hljs-string">'&lt;<a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a> rel="stylesheet" type="text/css" href="../common/reset.css"&gt;'</span>, () =&gt; { <span class="hljs-comment">// 获取 reset.css 文件中的内容</span> <span class="hljs-keyword">let</span> flexibleData = fs.readFileSync(path.resolve(__dirname, <span class="hljs-string">'../src/common/reset.css'</span>)); <span class="hljs-comment">// 返回一个流,写入共下一个内容使用</span> <span class="hljs-keyword">return</span> <span class="hljs-string">`&lt;style type="text/css"&gt;n<span class="hljs-subst">${flexibleData}</span>&lt;/style&gt;`</span>; }))</code></pre> <p>对应的文件替换完成之后,就需要删除 html 文件中的所有注释信息 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" .pipe(htmlmin({ collapseWhitespace: false, // 删除文档中的空格和换行,默认是false,不删除 removeComments: true // 清除注释内容 }))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(htmlmin({ <span class="hljs-attr">collapseWhitespace</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>, <span class="hljs-comment">// 删除文档中的空格和换行,默认是false,不删除</span> removeComments: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span> <span class="hljs-comment">// 清除注释内容</span> }))</code></pre> <p>最后就是将对应的 html 文件拷贝到对应的文件夹中。完整的任务代码如下 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="gulp.task('html', () => {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> gulp.src('./src/html/*.html', {<br /> base: 'src'<br /> })<br /> .pipe(replace('<script type=&quot;text/javascript&quot; src=&quot;../common/flexible.min.js&quot;></script>', () => {<br /> // 获取 flexible.min.js 文件中的内容<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> flexibleData = fs.readFileSync(path.resolve(__dirname, '../src/common/flexible.min.js'));<br /> // 返回一个流,写入共下一个内容使用<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> `<script type=&quot;text/javascript&quot;>n${flexibleData}</script>`;<br /> }))<br /> .pipe(replace('<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../common/reset.css&quot;>', () => {<br /> // 获取 reset.css 文件中的内容<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> flexibleData = fs.readFileSync(path.resolve(__dirname, '../src/common/reset.css'));<br /> // 返回一个流,写入共下一个内容使用<br /> return `</p> <style type=&quot;text/css&quot;>n${flexibleData}</style> <p>`;<br /> }))<br /> .pipe(htmlmin({<br /> collapseWhitespace: false, // 删除文档中的空格和换行,默认是false,不删除<br /> removeComments: true // 清除注释内容<br /> }))<br /> .pipe(gulp.dest('./dist'));<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">gulp.task(<span class="hljs-string">'html'</span>, () =&gt; { <span class="hljs-keyword">return</span> gulp.src(<span class="hljs-string">'./src/html/*.html'</span>, { <span class="hljs-attr">base</span>: <span class="hljs-string">'src'</span> }) .pipe(replace(<span class="hljs-string">'&lt;script type="text/javascript" src="../common/flexible.min.js"&gt;&lt;/script&gt;'</span>, () =&gt; { <span class="hljs-comment">// 获取 flexible.min.js 文件中的内容</span> <span class="hljs-keyword">let</span> flexibleData = fs.readFileSync(path.resolve(__dirname, <span class="hljs-string">'../src/common/flexible.min.js'</span>)); <span class="hljs-comment">// 返回一个流,写入共下一个内容使用</span> <span class="hljs-keyword">return</span> <span class="hljs-string">`&lt;script type="text/javascript"&gt;n<span class="hljs-subst">${flexibleData}</span>&lt;/script&gt;`</span>; })) .pipe(replace(<span class="hljs-string">'&lt;link rel="stylesheet" type="text/css" href="../common/reset.css"&gt;'</span>, () =&gt; { <span class="hljs-comment">// 获取 reset.css 文件中的内容</span> <span class="hljs-keyword">let</span> flexibleData = fs.readFileSync(path.resolve(__dirname, <span class="hljs-string">'../src/common/reset.css'</span>)); <span class="hljs-comment">// 返回一个流,写入共下一个内容使用</span> <span class="hljs-keyword">return</span> <span class="hljs-string">`&lt;style type="text/css"&gt;n<span class="hljs-subst">${flexibleData}</span>&lt;/style&gt;`</span>; })) .pipe(htmlmin({ <span class="hljs-attr">collapseWhitespace</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 删除文档中的空格和换行,默认是false,不删除</span> removeComments: <span class="hljs-literal">true</span> <span class="hljs-comment">// 清除注释内容</span> })) .pipe(gulp.dest(<span class="hljs-string">'./dist'</span>)); });</code></pre> <h2 id="articleHeader5">处理样式</h2> <p>样式文件的处理相对就比较复杂一点了。需要实现以下几个功能点 :</p> <ol> <li>将 sass 文件转成 css</li> <li>将 px 转成 rem</li> <li>自动增加浏览器前缀</li> <li>排序 css 属性</li> <li>压缩 css 代码</li> </ol> <p>首先定义一个规则,以下划线开头的 .scss 文件不进行转换。将以下划线开头的 .scss 文件作为提供公共方法的文件。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" gulp.src(['./src/css/*.scss', '!./src/css/_*.scss'], { base: 'src' })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> gulp.src([<span class="hljs-string">'./src/css/*.scss'</span>, <span class="hljs-string">'!./src/css/_*.scss'</span>], { <span class="hljs-attr">base</span>: <span class="hljs-string">'src'</span> })</code></pre> <p>对 .scss 文件进行转译,生成的 css 文件不删除注释,因为注释信息在 px 转成 rem 的时候会用到。在转换的过程中,使用的模块是 <code>gulp-sass</code>。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" .pipe(sass({ outputStyle: 'compact' // sass文件的输出方式,保留注释内容 }))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(sass({ <span class="hljs-attr">outputStyle</span>: <span class="hljs-string">'compact'</span> <span class="hljs-comment">// sass文件的输出方式,保留注释内容</span> }))</code></pre> <p>将 px 转成对应的 rem,需要依赖两个模块 <code>gulp-postcss</code> 和 <code>postcss-px2rem</code>。<code>postcss-px2rem</code> 是核心的转换模块。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" .pipe(postcss([px2rem({ remUnitpx2rem: 75 // // 将px转成rem,基准值是75,也就是用 75px/75=1rem })]))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(postcss([px2rem({ <span class="hljs-attr">remUnitpx2rem</span>: <span class="hljs-number">75</span> <span class="hljs-comment">// // 将px转成rem,基准值是75,也就是用 75px/75=1rem</span> })]))</code></pre> <p>接下来就可以做 css 的兼容处理,为属性增加浏览器前缀了。自动增加浏览器前缀使用到的模块是 <code>gulp-au<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>refixer</code>。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" .pipe(autoprefixer({ browsers: ['last 2 versions', 'Android >= 4.0'] // 控制增加前缀的版本<br /> }))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(autoprefixer({ <span class="hljs-attr">browsers</span>: [<span class="hljs-string">'last 2 versions'</span>, <span class="hljs-string">'Android &gt;= 4.0'</span>] <span class="hljs-comment">// 控制增加前缀的版本</span> }))</code></pre> <p>根据页面中的标签及标签中的选择器属性,来精简样式。主要就是使用 postcss 的插件 <code>postcss-uncss</code> 来精简样式,但是 <code>postcss-uncss</code> 模块又依赖 <code>uncss</code> 模块,因此,这两个模块都需要安装。安装完成之后,就可以设置精简样式的代码了。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" .pipe(postcss([uncss({ // 去除多余的样式 html: ['./src/**/*.html'] })]))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(postcss([uncss({ <span class="hljs-comment">// 去除多余的样式</span> html: [<span class="hljs-string">'./src/**/*.html'</span>] })]))</code></pre> <p>下面做的就是排序和压缩 css 了。排序 css 属性用到的模块是 <code>gulp-csscomb</code>,压缩 css 用到的模块是 <code>gulp-cssnano</code>。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" .pipe(csscomb()) // 排序CSS属性 .pipe(cssnano()) // 压缩CSS代码 .pipe(gulp.dest('./dist'));" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(csscomb()) <span class="hljs-comment">// 排序<a href="http://www.js-code.com/tag/css%e5%b1%9e%e6%80%a7" title="浏览关于“CSS属性”的文章" target="_blank" class="tag_link">CSS属性</a></span> .pipe(cssnano()) <span class="hljs-comment">// 压缩<a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a>代码</span> .pipe(gulp.dest(<span class="hljs-string">'./dist'</span>));</code></pre> <h2 id="articleHeader6">默认任务</h2> <p>在默认任务中,首先序列化任务的执行顺序。在每次执行任务之前,先把 dist 目录删除,然后执行 html css imgs 任务。这个时候就要使用 <code>gulp-sequence</code> 模块来定义任务执行的顺序。为了实现任务的顺序执行,就要在每个任务中返回一个流,或者调用一个回调函数,否则执行顺序会不正常。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="gulp.task('build', gulpSequence('clean', ['html', 'css', 'imgs']));" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;">gulp.task(<span class="hljs-string">'build'</span>, gulpSequence(<span class="hljs-string">'clean'</span>, [<span class="hljs-string">'html'</span>, <span class="hljs-string">'css'</span>, <span class="hljs-string">'imgs'</span>]));</code></pre> <p>如果要实现代码修改,浏览器自动刷新,就要使用 <code>browser-sync</code> 模块了。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="gulp.task('default', ['build'], () => {<br /> // 启动浏览器<br /> browserSync({<br /> server: {<br /> baseDir: './dist'<br /> },<br /> }, (err, bs) => {<br /> console.log(bs.options.getIn([&quot;urls&quot;, &quot;local&quot;]));<br /> });<br /> // 监视文件变化,执行对应的任务<br /> gulp.watch('src/html/*.*', ['html']);<br /> gulp.watch('src/css/*.*', ['css']);<br /> gulp.watch('src/imgs/*.*', ['imgs']);<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">gulp.task(<span class="hljs-string">'default'</span>, [<span class="hljs-string">'build'</span>], () =&gt; { <span class="hljs-comment">// 启动浏览器</span> browserSync({ <span class="hljs-attr">server</span>: { <span class="hljs-attr">baseDir</span>: <span class="hljs-string">'./dist'</span> }, }, (err, bs) =&gt; { <span class="hljs-built_in">console</span>.log(bs.<a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>s.getIn([<span class="hljs-string">"urls"</span>, <span class="hljs-string">"local"</span>])); }); <span class="hljs-comment">// 监视文件变化,执行对应的任务</span> gulp.watch(<span class="hljs-string">'src/html/*.*'</span>, [<span class="hljs-string">'html'</span>]); gulp.watch(<span class="hljs-string">'src/css/*.*'</span>, [<span class="hljs-string">'css'</span>]); gulp.watch(<span class="hljs-string">'src/imgs/*.*'</span>, [<span class="hljs-string">'imgs'</span>]); });</code></pre> <p>在执行默认任务后,修改代码,并没有发现浏览器跟着刷新。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ ./node_modules/.bin/gulp" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ ./node_modules/.bin/gulp</code></pre> <p>这是因为每个任务中没有通知浏览器刷新,因此,要在每个任务中加入流发生变化,通知浏览器刷新。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" .pipe(browserSync.reload({ // 管道刷新 stream: true })) .pipe(gulp.dest('./dist'));" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> .pipe(browserSync.reload({ <span class="hljs-comment">// 管道刷新</span> stream: <span class="hljs-literal">true</span> })) .pipe(gulp.dest(<span class="hljs-string">'./dist'</span>));</code></pre> <h2 id="articleHeader7">使用</h2> <ol> <li>在 src/html 写 html 文件</li> <li>在页面的头部加入 <code>&lt;script type="text/<a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script" src="../common/flexible.min.js"&gt;&lt;/script&gt;</code> 和 <code>&lt;<a href="http://www.js-code.com/tag/link" title="link" target="_blank">link</a> rel="stylesheet" type="text/css" href="../common/reset.css"&gt;</code> </li> <li>在 src/css 中写 .scss 样式</li> <li>将图片放入 imgs 文件夹中</li> <li>执行命令 : <code>./<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules/.bin/gulp</code> </li> </ol> <p>当然,命令也可以简化,就是在 <a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json 中配置。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" &quot;scripts&quot;: { &quot;gulp&quot;: &quot;gulp&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json"> <span class="hljs-string">"scripts"</span>: { <span class="hljs-attr">"gulp"</span>: <span class="hljs-string">"gulp"</span> }</code></pre> <p>这个时候在命令行执行命令就变成下面的形式了 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm run gulp" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">$ npm run gulp</code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Gulp 制作写 Demo 小工具

全部内容,希望文章能够帮你解决

Gulp 制作写 Demo 小工具

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过