SASS 使用过程中结合的 FIS 与 Ali 自动部署-JavaScript中文网-JavaScript教程资源分享门户

介绍

SASS（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，可以提供更加灵活和强大的样式表编写能力。但是，SASS 的使用也带来了一些额外的工作量，包括编译、压缩、打包等等。为了解决这些问题，可以结合 FIS 和 Ali 自动部署来简化前端开发流程。

FIS

FIS（前端集成解决方案）是由百度团队开发的前端构建工具，可以实现前端项目开发中的构建、部署、调试等功能。FIS 和 SASS 的结合使用，可以提供编译 SASS、压缩 CSS、合并 JS、自动刷新等功能。

安装和配置

安装 FIS：

npm install -g fis3

初始化项目：

fis3 init <project-name>

配置文件 fis-conf.js：

// javascriptcn.com 代码示例
// 设置默认目录
fis
.match('*.sass', {
    rExt: '.css',
    parser: fis.plugin('sass')
})
// 编译 sass
.match('*.scss', {
    rExt: '.css',
    parser: fis.plugin('sass')
})
// 压缩 css
.match('*.css', {
    optimizer: fis.plugin('clean-css')
})
// 压缩 js
.match('*.js', {
    optimizer: fis.plugin('uglify-js')
})
// 合并文件
.match('::package', {
    postpackager: fis.plugin('loader', {
        allInOne: true
    })
})

使用

在命令行中输入：

fis3 release

即可进行编译、压缩、合并等操作。

Ali 自动部署

Ali 自动部署是阿里云推出的一款自动化部署工具，可以实现自动化部署代码、文件、配置等操作。使用 Ali 自动部署可以提供代码自动部署、版本管理、自动备份等功能。

安装和配置

通过阿里云控制台创建一个部署机，在部署机中安装 Ali 自动部署工具：

sudo npm install SAGDeploy -g

配置文件 sag.config.js：

{
    projectName: 'projectName',
    accessKeyId: 'accessKeyId',
    accessKeySecret: 'accessKeySecret',
    endpoint: 'endpoint',
    from: '/data/',
    to: '/'
}

使用

在命令行中输入：

sag deploy

即可自动部署代码。

示例代码

index.html：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <h1>Hello World!</h1>
    <script src="js/index.js"></script>
</body>
</html>

index.scss：

$color: #333;

h1 {
    color: $color;
}

fis-conf.js：

// javascriptcn.com 代码示例
fis
.match('*.sass', {
    rExt: '.css',
    parser: fis.plugin('sass')
})
.match('*.scss', {
    rExt: '.css',
    parser: fis.plugin('sass')
})
.match('*.css', {
    optimizer: fis.plugin('clean-css')
})
.match('*.js', {
    optimizer: fis.plugin('uglify-js')
})
.match('::package', {
    postpackager: fis.plugin('loader', {
        allInOne: true
    })
})

sag.config.js：

{
    projectName: 'my-project',
    accessKeyId: 'accessKeyId',
    accessKeySecret: 'accessKeySecret',
    endpoint: 'oss-cn-hangzhou.aliyuncs.com',
    from: '/data/',
    to: '/'
}

总结

结合使用 SASS、FIS 和 Ali 自动部署，可以为前端开发提供更加便捷、高效的开发环境。SASS 可以提供更加灵活和强大的样式表编写能力，FIS 可以实现自动化编译、压缩、合并等操作，Ali 自动部署提供自动化部署、版本管理、自动备份等功能。掌握这些工具的使用可以让前端开发更加高效、省时。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653dffbc7d4982a6eb798292