gulp的安装及使用

gulp简介

前端自动化构建工具：gunt，gulp，webpack
gulp是基于流工作的
优点：

• 易于使用：很少的代码，极容易上手
• 构建快速：I/O操作少，执行速度快（流）
• 插件高质：插件代码职能明确
• 易于学习：只有4个API
  task,src,dest,watch

gulp的安装

在VSCode控制台中安装：
Ctrl + ~键在VsCode中打开控制台

1. 全局安装
   npm install gulp -g
   

2. 创建一个项目目录
   mkdir gulp_demo
   
   

3. 进入项目目录
   cd gulp_demo
   

4. 在项目中创建一个gulpfie.js文件（文件名固定不能修改）
   

5. 在项目中安装gulp
   npm init -y
   会生成一个package.json文件，里面有一些初始化信息
   
   npm install gulp -s
   
   文件package.json中会出现安装的插件
   

gulp的应用

1.编译sass

1.1安装gulp-sass

npm install gulp -s

1.2编写代码编译sass

// 引入模块
const gulp = require("gulp");
const sass = require("gulp-sass");

let arr = ["./src/sass/01.scss","./src/sass/02.scss"];
gulp.task("sass", done=>{
   
    gulp.src(arr)   //输入源(位置)
    .pipe(sass())   //编译sass(.scss->.css文件)
    .pipe(gulp.dest("./dist/css/"))//输出位置
    done();
})

2.压缩css

2.1安装gulp-clean-css

npm i gulp-clean-css -s

2.2编写代码压缩css代码

const gulp = require("gulp");
const sass = require("gulp-sass");
const cleanCss = require("gulp-clean-css");
let arr = ["./src/sass/01.scss", "./src/sass/02.scss"];
gulp.task("cleanCss", (done)