<blockquote>
<p>文章说明：本文章为拉钩大前端训练营所做笔记和心得，若有不当之处，还望各位指出与教导，谢谢 ! </p>
</blockquote>
<h2 id="%E4%B8%80%E3%80%81gulp">一、gulp</h2>
<p>Gulp核心特点是高效，易用。</p>
<ul><li>创建文件夹，并初始化package.json包管理文件： <pre class="blockcode"><code> $ mkdir project-name
$ cd project-name
$ yarn init --yes # or npm init -y
</code></pre> <p> </p> </li><li> <p> 安装gulp模块，同时会安装一个Gulp CLI的命令</p> <pre class="blockcode"><code> $ yarn add gulp --dev # or npm install gulp --save-dev
</code></pre> <p> </p> </li><li> 使用命令添加一个 gulp 的 入口文件 gulpfile.js ，并进行编码 <pre class="blockcode"><code> $ code gulpfile.js
</code></pre> <p>在gulpfile.js文件中定义一些Gulp需要执行的一些Gulp的构建任务</p> </li></ul>
<pre class="blockcode"><code class="language-javascript">// gulp的入口文件，因为这个文件时运行在node.js的环境当中，所以说可以在在这个文件当中运行commentJS规范
//这个文件定义构建任务的方式就是通过导出成员的方式去定义
exports.foo = () =>{
console.log('foo task working~')
}</code></pre>
<p>运行结果：yarn gulp foo 代码指定执行foo这个任务</p>
<p><img alt="" height="175" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-12dfbddf745b83a9d228f3c6c7282ff2.png" width="778"></p>
<p>报错：我们的foo任务执行没有完成，问我们是否忘记去标识这个任务的结束，这是因为在最新的gulp当中取消了同步代码模式，约定每一个任务都必须是一个异步的任务，当我们的任务执行完成过后需要通过调用回调函数或者其他的方式去标记任务已经完成，所以说我们在解决这个问题这一块，需要做的事情就是手动去调用一个回调函数，这个回调函数我们可以在代码当中通过foo这个函数的形式参数得到：</p>
<pre class="blockcode"><code class="language-javascript">
//这个回调函数我们可以在代码当中通过foo这个函数的形式参数得到,接收一个done的参数，这个done就是一个函数，可以在任务执行过后调用这个函数
exports.foo = done =>{
console.log('foo task working~')
done()//标识任务完成
}//这就是我们在gulp当中去定义一个任务的操作方式</code></pre>
<p>运行结果:</p>
<p><img alt="" height="138" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-d88441907e33bbe77350c3f01febadf7.png" width="681"></p>
<p>标识已经完成foo任务。</p>
<p>如果说你的任务方式是default的话，它会作为gulp的默认任务出现</p>
<pre class="blockcode"><code class="language-javascript">exports.default = done => {
console.log('default task working~')
done()
}</code></pre>
<p>使用 yarn gulp 命令运行，会直接执行默认任务</p>
<p><img alt="" height="131" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-42b3898c51aa77f4a9821a7d792397de.png" width="693"></p>
<p>在gulp4.0以前，我们注册任务时需要通过gulp模块里面的一个方法去实现，通过require的一个方法：</p>
<pre class="blockcode"><code class="language-javascript">const gulp = require('gulp')
gulp.task('bar',done =>{
console.log('bar working~')
done()
})//注册了一个叫bar的任务,这种方式不被推荐</code></pre>
<p><img alt="" height="133" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-2d01c29b010e46507cab86d5866fdaea.png" width="787"></p>
<p><strong>Gulp组合任务的API：series和parallel，可以创建并行任务和串行任务，使用series实现串行任务，使用parallel实现并行任务，使用parallel实现并行任务，使用这两种方法对实际创建构建工作流很有用。</strong></p>
<pre class="blockcode"><code class="language-javascript">const {series,parallel} = require('gulp')
//这些未被导出的函数可以理解成私有的任务，各自模拟了一个需要执行1秒的任务，并不能通过gulp去直接运行他们，通过gulp的series和parallel这两个API去把这些任务组合
const task1 = done =>{
setTimeout(() =>{
console.log('task1 working~')
done()
},1000)
}
const task2 = done =>{
setTimeout(() =>{
console.log('task2 working~')
done()
},1000)
}
const task3 = done =>{
setTimeout(() =>{
console.log('task3 working~')
done()
},1000)
}
//series是一个函数，每一个参数都可以是一个任务
exports.foo = series(task1,task2,task3)
//parallel是一个函数，每一个参数都可以是一个任务
exports.bar = parallel(task1,task2,task3)</code></pre>
<p><img alt="" height="255" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-3ad4619d34b7a3059ae6d29fc90760da.png" width="728"></p>
<p><img al |
|
转播
