前端学习笔记_使用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任务即可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,559评论 1 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 938评论 0 1
  • 想想学习Sass时间也有差不多一年的光景了。在这一年来的时间中,在GitHub不断阅读Sass相关的源码。也在国外...
    小豌豆书吧阅读 7,282评论 1 24
  • 作者:罗尔夫-多贝里[德] 1,幸存偏误,为什么你该去逛逛墓地 2,游泳选手身材错觉,哈弗大学是好大学还是烂大学?...
    文泉小火花阅读 752评论 0 0