备注: 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任务即可。