运用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适配的案例，若有不妥请大神斧正，感谢~