前端学习笔记_使用gulp编译sass文件

备注： sass文件中带_的文件不会被编译成css文件（例： _base.scss）

一个简单的sass文件：

base/_base

基础的ui: reset header header_nav header_search footer form table layout ...

config/_config

config 核心层 比如一些基本的variables mixin media animate grid …

mod/_mod

mod 模块 比如分页 分步导航 哪个模块用到在导入 比如 index.scss 用到了分页 就导入

pub/_pub

pub 一些公共的

gulpfile的配置文件，执行browser-sync任务，自动编译和监听：

var gulp = require('gulp'),
    borwserSync = require('browser-sync').create(),
    reload = borwserSync.reload,
    watch = require('gulp-watch'),
    sass = require('gulp-sass');

gulp.task('browser-sync',function(){
    borwserSync.init({
        server:{
        baseDir:'./'
        }
    });

    gulp.watch('src/sass/**/*.scss',['sassfile']);
    gulp.watch("*.html").on('change',reload);
});

gulp.task('sassfile',function(){
    return gulp.src('./src/sass/**/*.scss')
    .pipe( sass() ).pipe( gulp.dest( './dist/css' ) );
});

这样就可以直接gulp browser-sync任务即可。