gulp和sass的安装和使用(gulpfile.js)

74 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情

==一.安装 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目录下验证

在这里插入图片描述