gulp
gulp 简介
gulp 是一个前端自动构建工具
下面我来带大家一起搭建一个前端脚手架：
一、安装
- 全局安装
npm install -g gulp
ps: 安装成功之后执行 gulp -v查看版本号
二、创建项目
- 新建一个空的文件夹来存放 gulp 搭建的脚手架项目
- 在项目文件夹下新建一些文件具体如下：
ps：没有在表格中声明的就不用手动创建了
| 文件或文件 | 作用 |
|---|---|
| dist | 存放经过gulp 打包后的文件 |
| src | 打包之前的资源库 |
| index.html | 代码页面页可以在src中创建 |
| gulpfile.js | 编写gulp 脚本用 |
image.png
- 生成package.json
npm init
- 安装局部gulp，使用--save-dev，将通知计算机在package.json中添加依赖
npm install gulp --save-dev
5、安装gulp-sass模块
npm install gulp-sass --save
三、编写我们的 gulpfile.js 文件
// 请求gulp模块
const gulp = require('gulp')
//请求gulp-sass 模块
const sass = require('gulp-sass')
//创建管道命令，执行sass
//编译sass
gulp.task('sassTask', () => {
return gulp.src('./src/assets/css/*.scss')//打包之前sass路径
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('./dist'));//打包之后图片路径
});
// 监听sass文件
// ps监听sass文件内容修改自动编译需要安装gulp-server服务器，本篇没有安装，详情请看下一篇
gulp.task('Watch',()=>{
gulp.watch('./src/assets/css/**/*.scss',['sassTask'])
})
//默认管道命令：
gulp.task('default',['sassTask'],()=>{})//可以让默认的时候执行多个命名，在 [ ] 中添加即可
四、运行在小黑窗中
gulp sassTask//运行sass编译
gulp//运行默认编译
