[Day 03] 环境建置(二) - gulp、compiling SASS
今天要来安装这次会用到的所有工具套件，并能顺利将SASS编译成CSS~
VS Code 套件
我们这次需要使用到Live Server，可以到VS Code的延伸模组市集搜寻: Live Server，点击安装即可
Live Server可以建立一个轻巧的服务器，并且能够在你储存程序码後即时更新网页，省下重整页面的功夫，应该可以说是目前切版必备的工具~
这里也顺便分享一些切版常用的套件，有兴趣的话可以自行研究安装:
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
建立专案
建立专案资料夹
首先建立一个专案资料夹，这边我就取名叫做"ithelp"，建立完成後用VS Code开启这个资料夹(可以直接将资料夹拖曳至VS Code内)
初始化专案
在VS Code 按下键盘 CTRL + ‵ 按下後会打开VS Code的终端机，输入
npm init // 输入後会要输入一些专案资料，如只是想练习可以一直按Enter跳过
成功後资料夹内会产生一个 package.json 档案，里面可以看到专案资讯、指令、用了哪些套件等相关资讯
安装套件
接下来安装gulp和sass，在终端机输入
npm install gulp gulp-sass sass --save-dev
安装成功後会看到资料夹内出现node_modules、package-lock.json，并且package.json档案里面devDependencies区块内会多出刚刚安装的三个套件及其版本号
编译SASS
这边要开始来写一些程序了，首先在专案资料夹内建立sass资料夹在此资料夹内建立一个main.scss
因为我们会使用gulp帮我们自动执行一些任务，所以在专案资料夹内建立gulpfile.js并写程序让gulp执行任务
// gulpfile.js
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
// 将sass编译成css
function buildStyles() {
return src('sass/**/*.scss')
.pipe(sass())
.pipe(dest('css'));
}
// 自动监听，只要有储存档案就会自动将sass编译成css
function watchTasks() {
watch(['sass/**/*.scss'], buildStyles);
}
exports.default = series(buildStyles, watchTasks);
写完程序码後，在终端机输入
gulp
执行後会看到专案资料夹内会产生css资料夹，并且在资料夹内有main.css
接着在专案资料夹内建立index.html，并引入刚刚产生的main.css和写一些简单的Code~
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>[Day03] ITHelp Sass</title>
</head>
<body>
<div>
<p>Hello Sass</p>
</div>
</body>
</html>
最後就来写Sass吧，这次文章使用SCSS的写法(差异可看下一天的文章)~
首先切换到index.html，点击VS Code右下角的Go Live(或点右键也有选项可以选)执行Live Server
执行後浏览器会自动打开，并且可以看到页面上显示黑色字的Hello Sass
接下来我们到main.scss写一些样式
// main.scss
div {
p {
color: red;
font-weight: bold;
}
}
点击CTRL + S储存後回浏览器看会发现页面自动重整并且页面上的Hello Sass变成粗体红字了!
接下来我们可以到main.css查看，会发现在main.scss写的sass被编译成浏览器看得懂的css样式了~
/* main.css */
div p {
color: red;
font-weight: bold;
}
恭喜，从这就可以开始使用SASS切版了~
参考资料
<<: Angular+Spring Boot API 处理股市资料-前言+认识Spring Boot(Day1)
>>: Day 3 : 建立Python开发环境吧(Linux)!
Day 20 - WooCommerce: 定义信用卡付款闸道
永丰金流收款 API 在目前我们从文件看到的，支援信用卡付款及虚拟帐号 ATM 付款。本次铁人赛在也...
Day 24 实作 user_bp (2)
前言 今天要继续 user_bp，今天会把验证的部分处理掉。 /register 理论上我们现在应该...
C# object sender
以下 是在写 win form 常常看到的 Btn事件 private void button1_C...
DAY 15 - 哥布林 (2)
大家好~ 我是五岁~~ 今天让我们来把哥布林完成吧~~!!! 目标是把昨天的哥布林上色卡通化~~ 第...
[Day 7] Leetcode 621. Task Scheduler (C++)
前言 今天来分享621. Task Scheduler这一题~ 其实会选到这题本来也是要接续昨天pr...