gulp--sass

DataPipeline 發(fā)布于2019-08-23 15:11 / 1014人閱讀

摘要：復(fù)制文件在一個(gè)臨時(shí)的地方并進(jìn)行修改，任務(wù)只在開始和結(jié)束，節(jié)省流作為項(xiàng)目的開發(fā)依賴安裝在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為的文件將你的默認(rèn)的任務(wù)代碼放在這安裝為項(xiàng)目依賴和安裝完整代碼添加任務(wù)自動修復(fù)插件將你的默認(rèn)的任務(wù)代碼放在這監(jiān)測文件的改

gulp：復(fù)制文件在一個(gè)臨時(shí)的地方并進(jìn)行修改，i/o任務(wù)只在開始和結(jié)束，節(jié)省i/o流 1. 作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝：

$ npm install --save-dev gulp

2. 在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：

var gulp = require("gulp");
gulp.task("default", function() {
// 將你的默認(rèn)的任務(wù)代碼放在這
});

3. 安裝sass為項(xiàng)目依賴和安裝autoprefixer

$ npm install gulp-sass
$ npm install autoprefixer

4. 完整代碼（添加任務(wù)）

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");//自動修復(fù)插件

gulp.task("default", function() {
  console.log("hello");// 將你的默認(rèn)的任務(wù)代碼放在這
});

gulp.task("stream", function () {
    // Endless stream mode
    gulp.watch("css/**/*.css", ["styles"])//監(jiān)測scss文件的改動
});

gulp.task("styles", function() {
    gulp.src("sass/**/*.scss")
        .pipe(sass())//把scss轉(zhuǎn)為css
        .pipe(sass().on("error", sass.logError))//插入sass日志錯(cuò)誤函數(shù)，更改默認(rèn)行為，以便統(tǒng)一修改
        .pipe(autoprefixer({
            browsers: ["last 2 versions"]
        }))
        .pipe(gulp.dest("./css"));//把轉(zhuǎn)好的css文件存入css文件夾
})

云服務(wù)器 GPU云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101643.html

相關(guān)文章

前端構(gòu)建工具gulp入門教程

摘要：本文假設(shè)你之前沒有用過任何任務(wù)腳本和命令行工具，一步步教你上手。如果這兩行命令沒有得到返回，可能就沒有安裝正確，嘗試重啟下命令行工具，如果還不行的話，只能回到第一步進(jìn)行重裝。本文假設(shè)你之前沒有用過任何任務(wù)腳本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其實(shí)很簡單，我會分為五步向你介紹gulp并幫助你完成一些驚人的事情。那就直接開始吧。第一步：安裝No...

kuangcaibao 2019-08-21 12:07 評論0 收藏0
gulp-work-flow 前端工作流原來可以這么簡單

摘要：話不多說，今天的主題是使用打造傳統(tǒng)項(xiàng)目的前端工作流。是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。概述最近前端一直是一個(gè)火熱的話題，前端技術(shù)棧也是伴隨著nodejs的出現(xiàn)而更替的飛快，導(dǎo)致大部分前端開發(fā)者曾一度迷茫在這各種技術(shù)選型上，比如前端自動化工具就有Grunt，Gulp，Webpack，F(xiàn)is3等...

weakish 2019-08-21 14:27 評論0 收藏0
20分鐘gulp快速入門

摘要：所以出現(xiàn)了各種前端構(gòu)建化工具也應(yīng)運(yùn)而生等已經(jīng)成為現(xiàn)在前端開發(fā)工程師的必備技能之一。結(jié)語今天的分享就告一段落啦希望能對大家有所幫助。在互聯(lián)網(wǎng)告訴發(fā)展的今天，自node出現(xiàn)后，我們前端也越來越大（心里美美噠~），同樣帶來的Web業(yè)務(wù)日益復(fù)雜化和多元化，模式也都想webPage模式轉(zhuǎn)向webApp模式，拼幾個(gè)頁面搞幾個(gè)jquery的插件就能搞一個(gè)完成一個(gè)項(xiàng)目的日子已經(jīng)是很久遠(yuǎn)的曾經(jīng)了，而且...

RichardXG 2019-08-22 15:06 評論0 收藏0
前端基礎(chǔ)工作流：sass自動化編輯成css

摘要：目前提供了觀察文件變化，自動將文件編譯成的功能。但在有些機(jī)子上跟蹤編譯非常慢。如果想更順手的完成更復(fù)雜的編譯，就需要使用工具進(jìn)行處理。啟動提示打開編輯器編輯下文件，保存，查看下文件，已經(jīng)編譯好了。目前sass提供了觀察文件變化，自動將sass文件編譯成css的功能。但在有些機(jī)子上跟蹤編譯非常慢。使用不便。如果想更順手的完成更復(fù)雜的編譯，就需要使用nodejs,gulp 工具進(jìn)行處理。...

W4n9Hu1 2019-08-30 12:59 評論0 收藏0
Gulp入門教程

摘要：本教程分為兩個(gè)部分先講解的使用及參數(shù)說明，后以一個(gè)實(shí)際項(xiàng)目案例作為演練。或自動監(jiān)視文件變化并執(zhí)行指定的任務(wù)。項(xiàng)目代碼下載其他文獻(xiàn)官方接口文檔很多演示項(xiàng)目代碼其它教程文章 Gulp介紹 Gulp是一個(gè)前端開發(fā)的自動化構(gòu)建工具。前端開發(fā)往往需要把LESS/SCSS文件進(jìn)行編譯成CSS文件，JavaScript多文件合并成一個(gè)文件并壓縮以及一些其他需要重復(fù)性操作的工作。而Gulp就是通過簡單...

levius 2019-08-19 17:21 評論0 收藏0