理解Gulp:用自动化构建工具增强你的工作流程
工作流程:
通过一些IDE,实现自动编译
构建工具:
1: less,saas,stylus实时编译成css、
ES6,ES7,ES8实时编译成ES5,ES3
2: 压缩文件,合并文件,整理文件
3:提供一个实时同步的服务器自动化
1:写入:gulpfile.js文件:自动化管理文件
2:通过命令gulp 启动 管理文件中的相关gulp命令代码
二、基础入门操作流程
开始前主要注意的点
1:首先先创建一个项目文件,名为:gulpDemo;
2:以下操作是基于已安装node.js【一种服务器编程环境】,主要是Node.js的包管理器npm,我们可以很方便的利用它下载我们需要的依赖文件等。若尚未安装的可能无法实现以下的步骤;
3:同时命令行的输入均是通过git命令行界面输入,因此也需安装一下Git
No1:初始化,输入命令行cnpm init -y,此时gulpDemo文件中多了一个node_modules的文件夹
No2:全局安装gulp,输入命令行:cnpm i -g gulp
No3:在当前目录下安装gulp,输入命令行:cnpm i -D gulp,此时gulpDemo文件中多了一个package.json的文件
ps:安装完成后,在命令行界面输入:gulp -v 确认是否可以访问到环境变量。若出现如图所示
则说明成功啦~No4:在当前目录下创建一个名为:gulpfile.js的文件,这个文件的名称是约定俗成的,所以最好都以此命名,嗯这个文件就是把它理解为自动化管理的文件,通过命令来启动文件中相关的配置。
No5:开始编辑你的第一个任务吧
如图所示,在gulpfile.js中写入如图所示的代码
在命令行界面输入:gulp,得到如图所示
Bingo,已经成功进入gulp的大门啦
学习笔记与深入示例
根据gulp官网上的介绍,这是一个基于流的自动化管理工具,按照目前学习深度上来谈谈我的理解,举个栗子,工厂的自动化,一般是通过流水线的自动化操作提高作业效率,从而取代了普通人力的作用,将一些固定、繁杂、又必须的操作交由流水线上的自动化作业完成。再来看看项目开发中,大量的项目,一般会存在开发时的实时编译,最后文件的合并,整理,兼容处理,压缩打包等着一系列工作,这种繁琐又必要的操作交由人来处理,无疑是会被新的方式取代——Gulp,它就是用来处理这些的,通过基于流的方式【流水线、管道pipe】
这说明其中的一点:它是可以处理多个不同的任务。
- 示例代码一
调用task这个方法:gulp四大API之一
task(‘任务名称’,[导入其他任务],function(){
代码})
//这个示例中并没有导入其他任务
在命令行界面输入:gulp study【任务名称】;得到箭头所指的语句
- 示例代码二
默认的情况下添加其他任务:默认是指在命令行界面仅输入:gulp,而不是gulp +【任务名】
得到如下图所示:
bingo!成功执行了。这里默认情况下任务后添加了参数【数组:数组里面是其他任务的名称,这里是名为study的任务】,同时从代码代码执行结果上来看,是先执行数组里的任务,在执行默认情况下的任务。
以上就是简单的基础入门,一些可能存在但是又不知道怎么表述更准确的部分,等到日后工作后有所提升再来补充=。=
补充:环境变量
在安装gulp成功之后,在命令行界面输入:gulp -v出现报错或者提示不存在的时候,这时,需要修改一下环境变量。PS:对环境变量修改不是确定的,最好还是不要改了。。。一旦改错或者不小心删掉修改了某一环境变量,极有可能把人逼疯,这时候,可以请教其他小伙伴~
步骤1:找到node文件的地址,如图所示:我是放在e盘的其中一个exe文件夹中
步骤2:点击文件,发现了一个node_modules的文件夹;
步骤3:点击文件,发现了一个gulp的文件夹;
步骤4:点击文件,发现了一个bin的文件夹;
步骤5:点击文件,发现一个gulp.js的文件;就是它啦,此时复制当前的路径
步骤6:找到系统属性,在高级里点击环境变量
步骤7:找到系统属性,系统属性,系统属性;重要的事说三遍!!!然后看见第二个箭头,点击Path,再看第三个箭头,点击编辑,编辑,编辑
步骤8:进入之后,发现是这样的,此时点击新建,新建,新建
步骤9::在箭头所在的框里把之前复制的路径粘贴到这里就OK啦~之后别忘记点击确定,确定
PS:个人经历:有时会发现明明环境变量添加成功,且能正确访问到了,但会有时出现无法访问到环境变量,这时,除了文件发生修改需要修改路径外;还有解决方案:如图所示:点击添加的路径,移动到最下方或者最上方
OK,暂时就这些了~