gulp搭建起步及前端脚手架--sass篇-详解

gulp

gulp 简介

gulp 是一个前端自动构建工具

下面我来带大家一起搭建一个前端脚手架：

一、安装

1. 全局安装

npm install -g gulp

ps: 安装成功之后执行 gulp -v查看版本号

二、创建项目

1. 新建一个空的文件夹来存放 gulp 搭建的脚手架项目
2. 在项目文件夹下新建一些文件具体如下：
   ps：没有在表格中声明的就不用手动创建了

文件或文件	作用
dist	存放经过gulp 打包后的文件
src	打包之前的资源库
index.html	代码页面页可以在src中创建
gulpfile.js	编写gulp 脚本用

image.png

3. 生成package.json

npm init

4. 安装局部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//运行默认编译