【2019.6.26更新版本】使用gulp将sass文件编译成css样式 + 浏览器异步执行

一、安装gulp+sass(简单方便)
https://www.gulpjs.com.cn/docs/getting-started/
1.全局安装:npm install --global gulp
2.在本地项目里打开命令框初始化项目:npm init
3.作为项目的开发依赖安装:npm install --save-dev gulp
4.安装sass:npm install --save-dev gulp-sass

新增:浏览器异步执行 https://www.browsersync.io/docs/gulp
执行:npm install browser-sync gulp --save-dev

5.在项目根目录下创建一个名为 gulpfile.js 的文件 (最新版本)

const {task, src, watch, dest} = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

task('default', () => {

  browserSync.init({
    server: {
      baseDir: "./"
    }
  });

  watch(['scss/**.scss']).on('change', (path, stats) => {

    src(path)
      .pipe(sass({
        outputStyle: 'expanded'
      }))
      .pipe(dest("css"));

    browserSync.reload();
  });

  watch(['**/**.js', '**/**.html']).on('change', (path, stats) => {
    browserSync.reload();
  });
});

6.运行:gulp

你可能感兴趣的:(gulp)