gulp

最新推荐文章于 2020-10-19 16:01:11 发布

锦鲤抄liyanhe

最新推荐文章于 2020-10-19 16:01:11 发布

阅读量219

点赞数

CC 4.0 BY-SA版权

文章标签： gulp

本文链接：https://blog.youkuaiyun.com/liyanhecsdn/article/details/79559236

本文介绍如何通过Gulp来搭建前端开发环境，包括全局安装Gulp、配置项目环境、安装Sass插件等步骤，并详细展示了如何设置Gulp任务以实现SCSS文件的自动编译。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cnpm install gulp -g 全局安装gulp。
gulp -v 查询gulp是否安装成功。
进入项目目录，（cd example 进目录有时搞糊涂，好像是上边的）。
npm init 在已进入的目录下初始化一个环境。
敲入项目相关描述（可选填），完成后项目目录下会有一个名为’package.json’的描述文件。
敲入yes
cnpm install gulp --save-dev (–save-dev是为了把插件包显示在package.json中，为了以后在其他地方的安装)。
cnpm install gulp-sass --save-dev。安装sass
在项目根目录新建一个名为gulpfile.js 的js文件，打开gulp.js文件开始干活as follows:
手动创建scss文件夹，在创建一个.scss文件
return gulp.src('scss/style.scss') //需要编译的文件路径
.pipe(gulp.dest('css')) // 编译完成时自动创建文件夹css，并将编译好的.css文件放在里面
Node中的通配符
通配符是一种匹配模式，允许你匹配到多个文件。不止是Node，很多平台都有，有点像正则表达式。
使用通配符，计算机检查文件名和路径进行匹配。
大部分时候，我们只需要用到下面4种匹配模式：
1. *.scss ： * 号匹配当前目录任意文件，所以这里 *.scss 匹配当前目录下所有scss文件
2. **/*.scss ：匹配当前目录及其子目录下的所有scss文件。
3. !not-me.scss ：！号移除匹配的文件，这里将移除not-me.scss
4. *.+(scss|sass) ：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。