摘要：目前提供了观察文件变化，自动将文件编译成的功能。但在有些机子上跟踪编译非常慢。如果想更顺手的完成更复杂的编译，就需要使用工具进行处理。启动提示打开编辑器编辑下文件，保存，查看下文件，已经编译好了。
目前sass提供了观察文件变化，自动将sass文件编译成css的功能。
但在有些机子上跟踪编译非常慢。使用不便。
如果想更顺手的完成更复杂的编译，就需要使用nodejs,gulp 工具进行处理。
环境ubuntu 16.04
sudo apt-get install ruby
sudo gem install sass
国内会报错，如下
sudo gem install sass ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError) Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://api.rubygems.org/quick/Marshal.4.8/sass-3.4.22.gemspec.rz)
原因是国内和谐gem，解决方法是使用淘宝镜像如下
$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/ $ gem sources -l *** CURRENT SOURCES *** https://ruby.taobao.org # 请确保只有 ruby.taobao.org
重新执行sudo gem install sass
nodejs安装安装参考nodejs.org
npm访问慢的问题参考npm.taobao.org淘宝镜像
gulp 介绍
gulpjs.com
gulp中文网
gulp 安装参考gulp入门指南
简易步骤：
在项目更目录执行
npm install --save-dev gulp
*安装gulp-sass插件,详细说明gulp-sass
npm install gulp-sass
示例项目目录结构
-node_modules //node 模块 -scss //编译前的scss文件 --test.scss -css //编译后的css文件 --test.css --gulpfile.js //gulp任务执行工具配置文件 --index.html
gulpfile.js文件内容
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("scss",function(){
gulp.src("./scss/*.scss") //这里是scss文件的目录
.pipe(sass().on("error",sass.logError))
.pipe(gulp.dest("./css")); //这里是编译后css存放的目录
})
gulp.task("default",function(){
gulp.watch("./scss/*.scss",["scss"]); //在这里执行文件观察任务，发现变化执行上面定义好的 `scss`编译任务。
})
启动：
node_modules/.bin/gulp gulpfile.js
提示
[19:05:18] Using gulpfile ~/test/gulpfile.js [19:05:18] Starting "default"... [19:05:18] Finished "default" after 20 ms
打开编辑器编辑scss下test.scss文件，保存，查看css下test.css文件，已经编译好了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115215.html
摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。 这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...
摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。 这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...
摘要：本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块，不管该模块之前是否安装过由于国内墙的原因，使用安装会非常缓慢，慢到想切，不过还好，我们可以使用淘宝提供的国内镜像进行下载。 本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法强大的样式表Sass Sass 是一种可用于编写CSS的语言...
摘要：承接前一篇做一个合格的前端，自动化构建工具入门教程故而整理了如下插件资源大全。接下来我会逐一开源观点网开发过程中的前后端技术，如全文索引自定义富文本编辑器图片上传压缩水印等等。 承接前一篇《做一个合格的前端，gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。**【我的新作观点网：http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考...
阅读 2813·2023-04-25 15:01
阅读 3011·2021-11-23 10:07
阅读 3356·2021-10-12 10:12
阅读 3442·2021-08-30 09:45
阅读 2183·2021-08-20 09:36
阅读 3566·2019-08-30 12:59
阅读 2424·2019-08-26 13:52
阅读 926·2019-08-26 13:24
