A-A+

使用gulp编译sass文件

2017年02月12日 gulp 暂无评论 阅读 284 次

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

http://www.jianshu.com/p/f6ef362743eb

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录