使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件

defcon 发布于2019-08-26 11:50 / 3274人阅读

使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件 按照gulp需求插件 安装browser-sync（在命令行中输入）

  npm install --save-dev browser-sync

如果网速比较慢，可以用下面的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环境 按装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文件（重要！！！文件名为固定不变的。）输入以下内容：

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());    //文件有更新自动执行

    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());    //文件有更新自动执行
    return merge(scssIndex, scssComponents);
});

//监听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适配的案例，如有不妥请大神指正，谢谢~

私有云云服务器自动刷新代码 cdn自动刷新自动刷新设置教程 html自动刷新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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 搭建一套高性能的前端开发环境

摘要：首先在下面，定义好模版文件，然后开始新加页面关系依赖这个环境，主要基于以及一系列的插件搭建，这个是开发环境的依赖关系其中，主要用来渲染模版引擎以及提供路由功能，同时起一个本地的服务器。同时附上全文，以供参考原文发布于我的博客 www.kisnows.com 为什么要搭这么一套开发环境公司 Pc 端以前遗留的项目，都是基于 jekyll+ruby-sass 这一套比较老的技术搭建的。...

xioqua 2019-08-19 17:54 评论0 收藏0
NodeJS+Express搭建个人博客-gulp自动化构建工具使用（二）

摘要：自动化构建工具使用简言现在不管是做前端还是后端的，不可避免的是要跟打交道的而且这么容易开发难道我们不想自己随手写点什么这类比较前卫的框架早就深度集成了很多前端的东西现在，就让我们手动为也插上的翅膀吧。 gulp自动化构建工具使用简言现在不管是做前端还是后端的，不可避免的是要跟html打交道的；而且Node这么容易开发web；难道我们不想自己随手写点什么？Express这类比较前卫的...

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--手把手教你搭建前端自动化平台

摘要：前端的发展真的是快，前几年还是刀耕火种的开个编辑器，几行和代码就能上浏览器跑了。是啥官方的解释是基于流的自动化构建工具。把运动的半成品看成是数据，那么流动的数据就是流。分工明确才能提高效率，这是社会发展的经验总结。前端的发展真的是快，前几年还是刀耕火种的开个编辑器，几行html和js代码就能上浏览器跑了。现在呢？各种包，各种库，各种框架，各种编程范式。究其原因，就是我们高中社会课本中...

LeviDing 2019-08-20 18:26 评论0 收藏0