gulp的使用

我们必须要一个结构完整的目录
由于我们在打包完我们的文件名与源文件名是一致的我们也是不可以进行改名的,如果我们更改了名字我们在引入相应的文件就会出现错误
通常我们在项目文件夹下建立两个文件dist与src文件夹
src文件夹下放我们的相关源码 html,css,js
dist文件夹下我们放我们打包过后的文件 这个文件不需要我们自己区创建,在我们打包完成就生成了

2、同时我们还需要建一个gulpfile.js的文件,与src同级在这个js文件里写我们整个项目的打包配置流程
在每个项目在进行打包时,每次都需要进行再次安装gulp
gulp:
全局依赖第三方gulp,每台只需安装一次
项目依赖环境:没有进行项目打包都需要进行安装
切换到项目目录,$ npm install gulp 进行再次安装gulp

在项目文件夹中,shift+右键打开命令行输入 npm init

//注释:
在我们下载文gulp后我们项目文件夹中多了一个package.json文件,这个文件是记录第三方依赖的文件,在其中有两个文件 dependencies和devDependencies
*dependencies:这个是项目依赖,在我们的项目上线后还需要这个第三方依赖,比如Jquery等都包含**早这个下
devDependencies:这个是开发依赖,我们在开发中使用到的第三方依赖,我们的项目在上线后不再需要

3、进行安装gulp $ npm install -D gulp
如果没有-D,在我们下载完后,打开package.json文件,我们会看到gulp的依赖在dependencies下,所以我们在下载是我们加上-D ,我们的项目在上线后不在需要gulp所以我们要将其放在devDependencies

4、在gulpfile.js的文件中书写配置文件
书写项目的打包流程
书写完成后按照我们书写的打包流程去执行gulp指令,运行gulpfile,js文件

5、配置一个默认任务,将所以的任务一起执行
方式一:
gulp.task(‘default’,function(){})
方式二:
module.exports.default = function(){}

在gulpfile.js中书写默认任务
module.exports.default = gulp.parallel(cssHandler,jsHandler,…)

注意:
这个默认任务的名必须是default,这样在我们执行gulp是在命令行中直接输入gulp 就会执行gulpfile.js文件,默认找到default,如果我们的任务名是别的我们进行gulp命令直接运行会报错

6、利用gulp启动一个服务器
gulp是基于node 环境的工具
所以我们可以启动一个node服务器

上一篇:编辑器终端无法执行node,npm,yarn,gulp等部分命令的解决方法


下一篇:前端开发使用工具 gulp