gulp构建sass开发环境

傷城~ 2022-06-11 08:15 267阅读 0赞

首先全局安装 gulp命令

npm install gulp -g

然后构建项目目录：

![这里写图片描述][SouthEast]

*  app 用于存放scss文件
 *  dist 用于存放生成的css文件
 *  gulpfile.js 需要自己创建，用于处理gulp命令

然后在项目中安装gulp 和 gulp-sass

cnpm install gulp

cnpm install gulp-sass --save -dev

这里安装gulp-sass最好用cnpm ，因为有可能被墙或者因为python 版本不兼容而导致错误  
![这里写图片描述][SouthEast 1]

所以最好用cnpm 安装，安装完成是这个样子的。  
![这里写图片描述][SouthEast 2]

然后来编写gulpfile.js文件，这里是参照npm官网的写法，但是没有用严格模式  
[https://www.npmjs.com/package/gulp-sass][https_www.npmjs.com_package_gulp-sass]

var gulp = require('gulp');   // 引入依赖包
    var sass = require('gulp-sass'); //引入依赖包
    gulp.task('sass', function(){ 
        //sass()方法用于转换sass到css
      return gulp.src('./app/*.scss')   //执行sass文件的路径
        .pipe(sass()) // 将Sass转换为带有gulp-Sass的CSS
        .pipe(gulp.dest('./dist')) //输出css文件的路径
    });
    
    
    //执行gulp 命令的入口
    gulp.task('sass:watch', function(){ 
      gulp.watch('./app/*.scss', ['sass']); 
      // 监听指定路径的sass文件并编译
    })

最后：编译是实时编译的噢，所以可以一边修改一边编写sass代码

gulp watch

![这里写图片描述][SouthEast 3]

[SouthEast]: /images/20220611/4d21726707d34a4aa07bc21e355e48a2.png
[SouthEast 1]: /images/20220611/1b46d213e5584bb9b35a879c0d0898dd.png
[SouthEast 2]: /images/20220611/ce3f63f68c144835b994ec8210fec939.png
[https_www.npmjs.com_package_gulp-sass]: https://www.npmjs.com/package/gulp-sass
[SouthEast 3]: /images/20220611/0d10240ff91f49ffb4297629c6181466.png

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈node环境下的Sass以及gulp工具下的Sass

目录一、Sass简介二、Sass的解析器 1. node环境下的Sass解析器 2.

朱雀/ 2023年05月28日 09:50/ 0 赞/ 81 阅读

相关构建小能手---Gulp

Gulp 1. 基于node平台开发的前端构建工具（node第三方模块） 2. 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了 3

小灰灰/ 2023年03月13日 13:02/ 0 赞/ 4 阅读

相关 gulp（接在SASS之后）

gulp 解决项目做好以后的一些事情：压缩图片压缩js 压缩css 编译sass 合并文件… 人为效率低，所以学习gulp 不止有

我不是女神ヾ/ 2022年12月16日 09:20/ 0 赞/ 159 阅读

相关 Gulp前端构建工具

安装介绍 1.全局安装gulp npm install --global gulp 2. 作为项目的开发依赖（devDependencies）安装：(在

素颜马尾好姑娘i/ 2022年06月17日 04:00/ 0 赞/ 362 阅读

相关 gulp构建sass开发环境

首先全局安装 gulp命令 npm install gulp -g 然后构建项目目录： ![这里写图片描述][SouthEast] app 用于存放scs

傷城~/ 2022年06月11日 08:15/ 0 赞/ 268 阅读

相关 Gulp 自动化构建

Gulp 自动化构建 [use-gulp][] [官网][Link 1] gulp 可以做什么? 1. 编译 sass 2. 合并优化压缩 css 3.

秒速五厘米/ 2022年05月26日 10:13/ 0 赞/ 288 阅读

相关 Gulp 前端构建工具

基于流 1. 安装 2. 使用 3. API 4. 常用 gulp 插件基于流 Gulp是以 Nodejs中的stream(流) 为媒介

柔光的暖阳◎/ 2022年05月26日 09:48/ 0 赞/ 273 阅读

相关 gulp--sass

gulp：复制文件在一个临时的地方并进行修改，i/o任务只在开始和结束，节省i/o流 1. 作为项目的开发依赖（devDependencies）安装： $

今天药忘吃喽~/ 2022年03月07日 03:50/ 0 赞/ 209 阅读

相关 gulp--sass

gulp：复制文件在一个临时的地方并进行修改，i/o任务只在开始和结束，节省i/o流 1. 作为项目的开发依赖（devDependencies）安装： $

约定不等于承诺〃/ 2022年03月07日 03:50/ 0 赞/ 226 阅读

相关 gulp自动化构建工具

目录 gulp是什么？ gulp安装 gulp API gulp.src(globs\[, options\]) gulp.dest(path\[, options\

末蓝、/ 2022年01月21日 06:41/ 0 赞/ 403 阅读