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

使用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

一、安裝全局gulp

npm install gulp -g

二、初始化package.json

npm init

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

npm install gulp --save-dev

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

npm install --save-dev gulp-sass

五、本步驟按需求來按照，下面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適配的案例，若有不妥請大神指正，謝謝~