• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

前端Scss的使用及gulp发布方式

Html/Css 薛 陈磊 571次浏览 已收录 0个评论 扫描二维码

如标题所述,这篇博文是说scss以及gulp发布方式;

如果你没用过scssgulp或不甚了解,你可以看看这篇博文,叙说的水平有限,各位看官大神见谅;

scss之前,先来说说sass,sass是一种CSS的开发工具(前面的scss和less都是),提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护;我们都知道css不是一种编程语言,它只能定义描述样式,无法像编程语言一样继承和编译,而sass给我们提供这样一种便利,或者说它就是这样设计诞生的,sass中可以写入变量,使用表示层级关系的嵌套,导入其他sass,定义代码片段并可传参数,使用@extend来实现代码组合声明,进行运算等等功能,看起来很吊的样子,来看一段代码示例:

$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

示例中给出的分布是变量、嵌套、mixin的示例,详细使用方法大家可以去看官方文档sass,而我要说的scss跟这个sass的关系非常紧密,他们的区别是:

  1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名。

  2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

简单对比下两者的差别,示例:

//sass写法
$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

//scss写法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

在升级顺序上,可以把scss看成是sass的一种进阶写法,书写起来更方便,如果你使用scss惯了,就会明白它的便利之处,越用越顺手。说到这里,大家应该对scss有个比较清晰的认识了吧。要注意的是,无论是sass、scss或者less,在生产环境中都是要转换成css供页面引用的,也就是说,我们最初编码的时候,使用scss写样式,但是最终需要编译成css供使用,这也就牵涉到标题我说的发布方式的问题。

在使用sass或者scss之前,一般要安装ruby,其实书写跟ruby没啥关系,安装ruby是要用ruby进行发布,也即是发布成css,我这里就简述前两种发布方式(当然发布方式多种多样,看你用那个),第一种是compass指令,也就是ruby来发布,打开命令行使用compass和watch指令,可以将scss文件发布成css文件,具体操作方式如果感兴趣可自行百度,我这里就不详细累述了;第二种是使用图形操作软件,名字叫koala(还有种叫compass.app,因为相对于第一种,后面这两个都是图形界面的,就放一起了),这个操作和理解起来容易一些(特别是对于不知道什么是命令行的妹子),感兴趣请自行百度,很快就上手的(注意这些貌似也依托于ruby的)。

补充一点sass的四种编译形式,都是可选参数,关乎发布后的css格式,SASS提供四个编译风格的选项:

* nested:嵌套缩进的css代码,它是默认值。

* expanded:没有缩进的、扩展的css代码。

* compact:简洁格式的css代码。

* compressed:压缩后的css代码。

好了,下面到我要细说的gulp发布方式了,如果你不知道gulp,好吧我从头说起吧,近些年node.js很火,衍生出很多新技术,在很多地方有应用,以快速轻量级著称,使用node.js可以从前台写到后台,也即是全栈开发,几句代码可以创建web服务器,这使得习惯使用iis的我目瞪口呆,一个字吊,美帝掌握核心科技,不服不行,互联网方面美帝真是领先全球,创新力几十年内无人能超越(不信?安卓、ios、facebook、jquery、git等等例子太多,都是美帝出品,全世界在模仿使用),好吧跑题了,总之非常厉害,这里要说的gulp又是个什么鬼?(gulp中文网,强扭的瓜不甜,详细的请君翻阅相关官方api),gulp是基于node.js的一个工具模块,主要用来整合发布前端资源,包括图片、css、font、js等,通过配置,可以创建多种任务,轻松实现对前端资源的发布和监控工作;因为其基于node.js,使用前要安装node.js,使用npm管理器安装,配置好任务后就可以使用啦,就是这么酸爽有木有。

gulp的安装使用;gulp使用npm包管理器进行安装(如果你不知道npm,请移步百度或者谷歌之,我觉得我好啰嗦……以后这句就都省了哈),在使用npm安装的时候,依赖一个叫package.json的文件,package.json文件描述了一个NPM包的所有相关信息,包括作者、简介、包依赖、构建等信息。格式必须是严格的JSON格式;通常我们在创建一个NPM程序时,可以使用npm init命令,通过交互式的命令,自动生成一个package.json文件,里面包含了常用的一些字段信息,但远不止这么简单。通过完善package.json文件,我们可以让npm命令更好地为我们服务;也就是说package里定义了一系列信息,来定义信息和安装依赖,以我以前的一个项目为例:

前端Scss的使用及gulp发布方式

这里定义了一些信息和安装的组件,也就是gulp,其实前端发布也不过是mini、concat、rename、uglify、del等几个步骤,大家看图就明白组件的意思了,package定义好后就可以安装了,npm install全部安装,然后自定义gulp任务,也即是上图的gulpfile.js,通过一系列的任务定义,完成前端的发布或者监听任务,书写模式多种多样,不一而定,用的惯就好。

gulpfile.js也暴露出来吧给大家:

var gulp = require('gulp'),
    gulpif = require('gulp-if'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    spritesmith = require('gulp-spritesmith'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');


gulp.task('styles', function() {
  return gulp.src('mGlobal/css/*.css')
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('./dist/css'))
    .pipe(notify({message: 'Styles task complete'}));
});

gulp.task('scripts', function() {
  return gulp.src('mGlobal/js/**/*.js')
    //.pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter(stylish))
    // .pipe(concat('main.js'))
    // .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

gulp.task('fonts', function() {
  return gulp.src('mGlobal/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'))
    .pipe(notify({message: 'Fonts task complete'}));
});

gulp.task('images', ['sprites'], function() {
  return gulp.src('mGlobal/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

gulp.task('sprites', function () {
  // Sprites task...
    return gulp.src(['mGlobal/images/**/*.png', '!mGlobal/images/sprites.png'])
      .pipe(spritesmith({
        imgName: 'sprites.png',
        styleName: 'sprites.css',
        imgPath: '../images/sprites.png'
      }))
      .pipe(gulpif('*.png', gulp.dest('mGlobal/images')))
      .pipe(gulpif('*.css', gulp.dest('mGlobal/css')));
});

gulp.task('clean', function(cb) {
  del(['dist'], cb)
});

gulp.task('watch', function() {
  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['mGlobal/**']).on('change', livereload.changed);
});

gulp.task('default', ['clean'], function() {
  gulp.start(['styles', 'scripts', 'sprites', 'images', 'fonts']);
});

gulp.task后就是自定义的任务,可以单个运行也可以合并运行,比如 gulp scripts,gulp default,看代码可知是将mGlobal中的资源发布的dist文件夹中,从而完成我们需要的任务,监听发布则使用watch任务就可以了,所以gulp配置好了,感觉比前面说的图形界面发布和compas要好用(至少我这么认为),看你习惯用那种了;

哦对了,这个示例是我前一个项目,没有用scss写,scss发布跟这个很接近了,改成scss发布就行了;

差不多该说的都说了吧,如果大家有什么不明白的可以百度谷歌之或者与我交流下,叙述水平有限,有纰漏的地方欢迎大家指正。


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明前端Scss的使用及gulp发布方式
喜欢 (0)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址