一.安装 gulp 及运用
# 全局环境下的安装 (只运行一次即可)-g
# 在当前项目安装 项目依赖 -D
# 流程
1. npm init 初始化环境 生成一个 package.json 文件
2. npm install 模块名 -g 全局安装 / -D 默认安装最新的版本 也可以指定版本 npm install gulp@3.9.1 -D devDependencies 开发环境下依赖的模块 dependencies 生产环境下依赖依赖
npm install gulp -g
npm install gulp -D
3. 创建一个 gulpfile.js 文件,在这个文件里创建任务(task)
4. gulp 任务名
安装gulp
安装gulp**********************************
npm init -y
npm install gulp -g //全局安装
npm install gulp -D //安装本地依赖
注: gulp -v 命令得到两个版本号,
一个全局的一个局部的才代表安装成功
在gulpfile.js文件中创建任务
创建任务***********************************
在根目录下创建一个的文件 gulpfile.js
在文件中写入以下内容
var gulp = require('gulp');
gulp.task('hello',done=>{ //第一个参数是任务名称,第二个参数是任务功能
console.log('hello gulp!');
done();
})
写完之后呢
在命令行中输入 gulp hello 即“gulp 任务名” 命令执行输出hello world!
其他命令我们会在后面介绍 这里呢我们先介绍一个默认的任务
gulp.task("default", gulp.series("hello"));按顺序执行任务
gulp.task("default", gulp.parallel("hello"));并行执行
gulp基础
gulp基础************************************
gulp.src().pipe(gulp.dest())
gulp.src()方法可以帮助我们找出将要处理的文件,然后pipe()去处理这些找到的文件。pipe()可以理解为管道,每个管道就可以指定它的功能,最后我们再使用gulp.dest()方法把处理好的文件放到指定的地方。
使用gulp来实现文件的copy **************************************
首先在我们工程目录下新建一个测试使用的index.html, 然后写入相应的内容
在我们的gulpfile.js文件中输入以下内容
gulp.task("copyIndex", done => {
gulp.src("index.html").pipe(gulp.dest("dist"));
done();
})
在我们的命令行中执行
gulp copyIndex 命令 然后去dist目录下验证