gulp自动化构建工具的使用

安装:

 

1.下载node.js
2.启动node.js

        window开始键-nodejs文件夹-prompt

 3.全局安装

        命令行安装 npm install gulp -g,查看版本gulp -v

4.项目开发安装

        我的项目文件夹结构:F:\gulpProject

        全局安装完gulp查看是否安装成功,gulp -v 

        进入gulpProject文件夹执行npm init 一路回车生成package.json文件,当发现gulpProject文件夹下生成package.json的文件时,代表执行成功

本地安装Gulp执行cnpm install gulp --save-dev,前提需要进入到你想开发项目的这个目录,切换盘符 F: + enter , cd + 目录路径

 查看是否安装成功:项目文件中生成 node_modules 文件

  清屏 cls

5.创建一个gulpfile.js文件,专门gulp去编写任务

// commonjs规范
// 1.require() 将这个模块引入 
// 2.使用这个模块上的函数
const gulp = require("gulp")

// 编写第一个任务
// 第一个参数:任务的名字,自定义 
// 第二个参数:回调函数,任务执行的功能 

gulp.task("hello", function(){
    console.log("hello world")
})

// 方法:
// gulp.src() 找到源文件路径
// gulp.dest() 找到目的文件路径,如果不存在会自动创建
// pipe() 理解程序运行管道

gulp.task("copy-html",function(){
    return gulp.src("index.html")
    .pipe(gulp.dest("dist/"))
})

6.gulpfile.js编写任务,需要在控制台通过gulp+任务名运行

要运行gulp任务,只需切换到存放gulpfile.js文件的目录,然后在命令行中执行gulp命令就行了,gulp后面可以加上要执行的任务名,例如gulp task1,如果没有指定任务名,则会执行任务名为default的默认任务

全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能 

给Gulp添加插件

网址:https://guipjs.com/plugins/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值