資訊專欄INFORMATION COLUMN
摘要：目前提供了觀察文件變化，自動(dòng)將文件編譯成的功能。但在有些機(jī)子上跟蹤編譯非常慢。如果想更順手的完成更復(fù)雜的編譯，就需要使用工具進(jìn)行處理。啟動(dòng)提示打開編輯器編輯下文件，保存，查看下文件，已經(jīng)編譯好了。
目前sass提供了觀察文件變化，自動(dòng)將sass文件編譯成css的功能。
但在有些機(jī)子上跟蹤編譯非常慢。使用不便。
如果想更順手的完成更復(fù)雜的編譯，就需要使用nodejs,gulp 工具進(jìn)行處理。
環(huán)境ubuntu 16.04
sudo apt-get install ruby
sudo gem install sass
國(guó)內(nèi)會(huì)報(bào)錯(cuò)，如下
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)
原因是國(guó)內(nèi)和諧gem，解決方法是使用淘寶鏡像如下
$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/ $ gem sources -l *** CURRENT SOURCES *** https://ruby.taobao.org # 請(qǐng)確保只有 ruby.taobao.org
重新執(zhí)行sudo gem install sass
nodejs安裝安裝參考nodejs.org
npm訪問(wèn)慢的問(wèn)題參考npm.taobao.org淘寶鏡像
gulp 介紹
gulpjs.com
gulp中文網(wǎng)
gulp 安裝參考gulp入門指南
簡(jiǎn)易步驟：
在項(xiàng)目更目錄執(zhí)行
npm install --save-dev gulp
*安裝gulp-sass插件,詳細(xì)說(shuō)明gulp-sass
npm install gulp-sass
示例項(xiàng)目目錄結(jié)構(gòu)
-node_modules //node 模塊 -scss //編譯前的scss文件 --test.scss -css //編譯后的css文件 --test.css --gulpfile.js //gulp任務(wù)執(zhí)行工具配置文件 --index.html
gulpfile.js文件內(nèi)容
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"]); //在這里執(zhí)行文件觀察任務(wù)，發(fā)現(xiàn)變化執(zhí)行上面定義好的 `scss`編譯任務(wù)。
})
啟動(dòng)：
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文件，已經(jīng)編譯好了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115215.html
摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來(lái)的額外維護(hù)開銷，預(yù)處理器有沒(méi)有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。 這篇文章主要解答以下幾個(gè)問(wèn)題，供前端開發(fā)者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預(yù)處理器？ 3、Sass和Less的...
摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來(lái)的額外維護(hù)開銷，預(yù)處理器有沒(méi)有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。 這篇文章主要解答以下幾個(gè)問(wèn)題，供前端開發(fā)者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預(yù)處理器？ 3、Sass和Less的...
摘要：本節(jié)將學(xué)習(xí)是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令來(lái)強(qiáng)制安裝所有模塊，不管該模塊之前是否安裝過(guò)由于國(guó)內(nèi)墻的原因，使用安裝會(huì)非常緩慢，慢到想切，不過(guò)還好，我們可以使用淘寶提供的國(guó)內(nèi)鏡像進(jìn)行下載。 本節(jié)將學(xué)習(xí) Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法強(qiáng)大的樣式表Sass Sass 是一種可用于編寫CSS的語(yǔ)言...
摘要：本教程分為兩個(gè)部分先講解的使用及參數(shù)說(shuō)明，后以一個(gè)實(shí)際項(xiàng)目案例作為演練?；蜃詣?dòng)監(jiān)視文件變化并執(zhí)行指定的任務(wù)。項(xiàng)目代碼下載其他文獻(xiàn)官方接口文檔很多演示項(xiàng)目代碼其它教程文章 Gulp介紹 Gulp是一個(gè)前端開發(fā)的自動(dòng)化構(gòu)建工具。前端開發(fā)往往需要把LESS/SCSS文件進(jìn)行編譯成CSS文件，JavaScript多文件合并成一個(gè)文件并壓縮以及一些其他需要重復(fù)性操作的工作。而Gulp就是通過(guò)簡(jiǎn)單...
摘要：承接前一篇做一個(gè)合格的前端，自動(dòng)化構(gòu)建工具入門教程故而整理了如下插件資源大全。接下來(lái)我會(huì)逐一開源觀點(diǎn)網(wǎng)開發(fā)過(guò)程中的前后端技術(shù)，如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。 承接前一篇《做一個(gè)合格的前端，gulp自動(dòng)化構(gòu)建工具入門教程》故而整理了如下gulp插件資源大全。**【我的新作觀點(diǎn)網(wǎng)：http://www.guandn.com (觀點(diǎn)網(wǎng)是一個(gè)獵獲新奇、收獲知識(shí)、重在獨(dú)立思考...
閱讀 2877·2023-04-25 15:01
閱讀 3187·2021-11-23 10:07
閱讀 3415·2021-10-12 10:12
閱讀 3527·2021-08-30 09:45
閱讀 2249·2021-08-20 09:36
閱讀 3661·2019-08-30 12:59
閱讀 2505·2019-08-26 13:52
閱讀 988·2019-08-26 13:24
