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

栏目: 编程工具 · 发布时间: 6年前

内容简介:1、安装全局gulp2、初始化package.jsonnpm init
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']);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

做自己:鬼脚七自媒体第一季

做自己:鬼脚七自媒体第一季

鬼脚七 / 电子工业出版社 / 2013-7 / 77.00元

当我们习惯了在社会上带着面具的时候,真实成为了一件奢侈的事情。 做到足够真实,让自己的本性表达出来,这需要勇敢。本书是鬼脚七自媒体的原创文集,主题就是做自己。本书有关于生活、互联网、自媒体的睿智分享,也有关于淘宝、搜索的独到见解,是一本接地气,文艺范,并充满正能量的电商生活书。 本书最适合淘宝卖家、电子商务人群、希望了解电商和互联网的人群阅读,也推荐热爱生活的70、80、90后阅读。一起来看看 《做自己:鬼脚七自媒体第一季》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具