自动化工具Gulp 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

gulp的使用


1 建立gulpfile.js文件

  gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfile.js。新建一个文件名为gulpfile.js的文件,然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是一个最简单的gulpfile.js文件内容示例,它定义了一个默认的任务。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

此时我们的目录结构是这样子的:

2 运行gulp任务

  要运行gulp任务,只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具),然后在命令行中执行gulp命令就行了,gulp后面可以加上要执行的任务名,例如gulp task1,如果没有指定任务名,则会执行任务名为default的默认任务。

3 课程练习环境

  (1)在右面的编辑环境中点击【文件管理】,就可以看到我们上图已经为大家创建的目录结构;

  (2)然后我们就可以对gulpfile.js文件进行编辑(双击),编辑完成后点击【保存文件】;

  (3)最后在终端中转到我们的项目目录,运行gulp命令,这样就可以在终端中查看结果了。

  另外,在列出的目录项中,我们可以通过右键来对文件或目录进行操作。

  这节课让我们熟悉一下学习环境中终端的使用方法,以及运行结果的查看。将上面的代码放到gulpfile.js中试一试吧。