前端scss的使用及gulp发布方式
如标题所述,这篇博文是说scss以及gulp发布方式;
如果你没用过scss和gulp或不甚了解,你可以看看这篇博文,叙说的水平有限,各位看官大神见谅;
说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:;
padding:;
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的关系非常紧密,他们的区别是:
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名。
- 语法书写方式不同,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里定义了一系列信息,来定义信息和安装依赖,以我以前的一个项目为例:
这里定义了一些信息和安装的组件,也就是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发布就行了;
差不多该说的都说了吧,如果大家有什么不明白的可以百度谷歌之或者与我交流下,叙述水平有限,有纰漏的地方欢迎大家指正。
原文地址:前端scss的使用及gulp发布方式,薛陈磊 | Share the world
前端scss的使用及gulp发布方式的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- docker 发布方式尝试
docker 发布方式尝试 目前有个小项目, 尝试用docker的方式来发布, 项目只有一个节点, 使用 kubenate 有点小题大做, 所以采用docker-compose来发布. 发布过程 GI ...
- 面向接口的webservice发布方式
import javax.jws.WebService; /**面向接口的webservice发布方式 */ @WebService public interface JobService { pub ...
- 前端之web上传文件的方式
前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第九篇:web之前端之web上传文件的方式
前端之web上传文件的方式 前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...
- Qt官方开发环境生成的exe发布方式--使用windeployqt(windeployqt是单独的程序,放在低版本qt4目录下也可以运行的)
Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,如果自己去复制dll,很可能丢三落四,导致exe在别的电脑里无法正常运行.因此 Qt 官方开发环境里自带了一个 ...
- 前端传递给后端且通过cookie方式,尽量传递id
前端传递给后端且通过cookie方式,尽量传递id
- 用Python3、NetCore、Shell分别开发一个Ubuntu版的定时提醒(附NetCore跨平台两种发布方式)
汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai Python3 与 C# 基础语法对比:https://www.cnblogs.com/ ...
随机推荐
- javascript 设计模式-----单例模式
单例模式的意思是只需要实例化某个类一次,它的方法也比较简单,通过判断某个类是否已经被实例化了,再返回该值.可以通过各种方法来实现单例模式,下面我们采取以下这种实现方式: var single = (f ...
- nginx(2、反向代理)
反向代理是nginx最重要的特性之一,与正向代理相反,它代理的不是客户端,而是目标源,即我代理目标源满足客户端给出的请求. 在nginx中反向代理的简单配置如下: server { listen 80 ...
- AMD加载器实现笔记(三)
上一篇文章中我们为config添加了baseUrl和packages的支持,那么这篇文章中将会看到对shim与paths的支持. 要添加shim与paths,第一要务当然是了解他们的语义与用法.先来看 ...
- hibernate继承(转)
http://justsee.iteye.com/blog/1070588 一.继承关系_整个继承树映射到一张表 对象模型(Java类结构) 一个类继承体系一张表(subclass)(表结构) Emp ...
- MVVM架构~mvc,mvp,mvvm大话开篇
返回目录 百度百科的定义: MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新 ...
- Atitit 基于图片图像 与文档混合文件夹的分类
Atitit 基于图片图像 与文档混合文件夹的分类 太小的文档(txt doc csv exl ppt pptx)单独分类 Mov10KminiDoc 但是可能会有一些书法图片迁移,因为他们很微小,需 ...
- qqzoneQQ空间漏洞扫描器的设计attilax总结
qqzoneQQ空间漏洞扫描器的设计attilax总结 1.1. 获取对方qq(第三方,以及其他机制)1 1.2. QQ空间的html流程1 1.3. 判断是否有权限1 1.4. 2015年度Web服 ...
- piap.windows io 监测attilax总结
piap.windows io 监测attilax总结 当硬盘光狂闪的时候. 主要目标:找出哪个进程占用io最多, 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来 ...
- C# WebBrowser 获得选中部分的html源码
Winform程序 2.0的. 需要引用Microsoft.mshtml. private void Form1_Load(object sender, EventArgs e) { webBrows ...
- java更改数据库中的数据
不废话,上代码 package com.ningmeng; import java.sql.*; /** * 1:更改数据库中的数据 * @author biexiansheng * */ publi ...