使用gulp+browser-sync搭建Sass自動化編譯以及自動刷新所需要的插件

defcon 發(fā)布于2019-08-26 11:50 / 3368人閱讀

使用gulp+browser-sync搭建Sass自動化編譯以及自動刷新所需要的插件 按照gulp需求插件 安裝browser-sync（在命令行中輸入）

  npm install --save-dev browser-sync

如果網(wǎng)速比較慢，可以用下面的cnpm命令運行：

  cnpm install --save-dev browser-sync

下面列一些安裝其它的插件，如需用到可以安裝下面的這些插件

npm install --save-dev gulp-concat//js合并插件

npm install --save-dev gulp-uglify//js壓縮插件

npm install --save-dev gulp-cssnano//css壓縮插件

npm install --save-dev gulp-imagemin//圖片壓縮插件

npm install --save-dev gulp-htmlmin//html壓縮插件

npm install --save-dev del//文件刪除模塊

npm install --save-dev gulp merge-stream//在一個任務中使用多個文件來源

搭建gulp環(huán)境 按裝gulp

1、安裝全局gulp

npm install gulp -g

2、初始化package.json

npm init

3、在本項目安裝引入的gulp

npm install gulp --save-dev

4、在本項目按照sass相關插件

npm install --save-dev gulp-sass

5、本步驟按需求來按照，下面gulp相關插件可以搭建完整的css、js相關壓縮

npm install --save-dev gulp-concat gulp-uglify gulp-cssnano gulp-imagemin gulp-htmlmin merge-stream

配置gulpfile.js

在項目根目錄中新建gulpfile.js文件（重要！??！文件名為固定不變的。）輸入以下內(nèi)容：

const gulp = require("gulp"); //獲取gulp
const sass = require("gulp-sass");  //獲取gulp
const browsersync = require("browser-sync").create(); //獲取browsersync
const cssnano = require("gulp-cssnano"); //css壓縮插件
const merge = require("merge-stream");

//操作css文件
/**
*  如果是一個任務處理多文件夾的話，
*  只要聲明不同的變量，
*  然后return merge(xx, xx)合并返回即可
*  如下 style 任務
*/
gulp.task("style", function() {
    const scssIndex = gulp.src("./common/scss/*.scss")  //需要編譯scss的文件
    .pipe(sass({outputStyle: "compressed"})   //壓縮格式：nested(嵌套)、compact（緊湊）、expanded（擴展）、compressed（壓縮）
    .on("error", sass.logError))
    .pipe(cssnano())                 //css壓縮
    .pipe(gulp.dest("./common/css"))    //輸出路徑
    .pipe(browsersync.stream());    //文件有更新自動執(zhí)行

    const scssComponents = gulp.src("./common/components-scss/*.scss")  //需要編譯scss的文件
    .pipe(sass({outputStyle: "compressed"})   //壓縮格式：nested(嵌套)、compact（緊湊）、expanded（擴展）、compressed（壓縮）
    .on("error", sass.logError))
    .pipe(cssnano())                 //css壓縮
    .pipe(gulp.dest("./common/components-css"))    //輸出路徑
    .pipe(browsersync.stream());    //文件有更新自動執(zhí)行
    return merge(scssIndex, scssComponents);
});

//監(jiān)聽scss文件
gulp.task("serve",function() {
    gulp.start("style");
    gulp.watch("./common/scss/*.scss", ["style"]);
    gulp.watch("./common/components-scss/*.scss", ["style"]);
});

//編譯scss文件：gulp default
gulp.task("default",["serve"]);

本文出自本人博客使用gulp+browser-sync搭建Sass自動化編譯以及自動刷新所需要的插件

本文案例在Github上使用gulp+browser-sync搭建Sass自動化編譯以及自動刷新所需要的插件案例瀏覽。

本案例除了gulp配置sass外還是一個rem適配的案例，如有不妥請大神指正，謝謝~

云服務器 GPU云服務器自動刷新代碼 html自動刷新 cdn自動刷新自動刷新設置教程

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

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

基于 Gulp 的簡易前端自動化工程搭建

摘要：生成的文件如下由于給文件添加了哈希值，所以每次編譯出來的和都是不一樣的，這會導致有很多冗余文件，所以我們可以每次在生成文件之前，先將原來的文件全部清空。中也有做這個工作的插件，因此我們可以在編譯壓縮添加哈希值之前先將原文將清空。原文鏈接：http://mrzhang123.github.io/2016/09/07/gulpUse/項目鏈接：https://github.com/MrZ...

Blackjun 2019-08-22 10:36 評論0 收藏0
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端開發(fā)環(huán)境

摘要：首先在下面，定義好模版文件，然后開始新加頁面關系依賴這個環(huán)境，主要基于以及一系列的插件搭建，這個是開發(fā)環(huán)境的依賴關系其中，主要用來渲染模版引擎以及提供路由功能，同時起一個本地的服務器。同時附上全文，以供參考原文發(fā)布于我的博客 www.kisnows.com 為什么要搭這么一套開發(fā)環(huán)境公司 Pc 端以前遺留的項目，都是基于 jekyll+ruby-sass 這一套比較老的技術搭建的。...

xioqua 2019-08-19 17:54 評論0 收藏0
NodeJS+Express搭建個人博客-gulp自動化構建工具使用（二）

摘要：自動化構建工具使用簡言現(xiàn)在不管是做前端還是后端的，不可避免的是要跟打交道的而且這么容易開發(fā)難道我們不想自己隨手寫點什么這類比較前衛(wèi)的框架早就深度集成了很多前端的東西現(xiàn)在，就讓我們手動為也插上的翅膀吧。 gulp自動化構建工具使用簡言現(xiàn)在不管是做前端還是后端的，不可避免的是要跟html打交道的；而且Node這么容易開發(fā)web；難道我們不想自己隨手寫點什么？Express這類比較前衛(wèi)的...

Yangder 2019-06-26 17:47 評論0 收藏0
前端工具系列之一 Gulp

摘要：從大約年開始前端不再是當初那個切圖排版的前端了，各種框架庫工具呈井噴之勢層出不窮。作為一個怕麻煩的懶人，對于前端的繁雜工作當然是要找一個自動化工具來處理，于是我遇到了。從(大約)2014年開始,前端不再是當初那個切圖排版的前端了，各種MV*框架、庫、工具呈井噴之勢層出不窮。構建工具比較有名的如Grunt、Gulp、Yeoman、webpack；依賴管理比如bower、npm，當然最流...

xiongzenghui 2019-08-21 10:51 評論0 收藏0
Gulp--手把手教你搭建前端自動化平臺

摘要：前端的發(fā)展真的是快，前幾年還是刀耕火種的開個編輯器，幾行和代碼就能上瀏覽器跑了。是啥官方的解釋是基于流的自動化構建工具。把運動的半成品看成是數(shù)據(jù)，那么流動的數(shù)據(jù)就是流。分工明確才能提高效率，這是社會發(fā)展的經(jīng)驗總結。前端的發(fā)展真的是快，前幾年還是刀耕火種的開個編輯器，幾行html和js代碼就能上瀏覽器跑了?，F(xiàn)在呢？各種包，各種庫，各種框架，各種編程范式。究其原因，就是我們高中社會課本中...

LeviDing 2019-08-20 18:26 評論0 收藏0