gulp的环境配置和安装：http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇gulpfile.js的配置，用于自动化编译sass和pug文件用...： 1 var gulp = require('gulp'); 2 var pug = require('gulp-pug'); 3 var sass = require('gulp-sass')...; 4 var rename = require('gulp-rename'); 5 var notify = require('gulp-notify'); 6 var plumber = require...: 'expanded'})) 39 .pipe(gulp.dest(paths.css)) 40 }); 41 42 gulp.task('watch', ['sass'], function...() { 43 gulp.watch(paths.pugWatch2, ['pug']); 44 gulp.watch(paths.sassWatch, ['sass']); 45 }); 46
和 LESS 一样 SASS 文件中也支持导入其它 SASS 文件，其实原生的 CSS 也支持通过 @import 导入其它的 CSS 文件，只不过不常用，不常用的原因在于原生的 @import 导入其它的...CSS 文件，只有执行到 @import 时浏觅器才会去下载对应 CSS 文件，这导致请求次数变多，页面加载起来特别慢，而 LESS 和 SASS 中的 @import 是直接将导入的文件拷贝到当前文件中生成一份..."center";div { width: 200px; height: 200px; background: red; @include center;}新建一个 center.scss 文件内容如下
解决方法也呼之欲出了，在cached() 与 sass() 的pipe 的中间我们还需要一个步骤，即将传入的改动文件找出其上下关系的依赖文件，整体文件集传入到 sass() 的pipe 去执行编译。...社区中也早早有这个解决方案，sass-graph 便是这么个专门分析依赖文件的第三方模块。...4 中的增量编译 上面的这套方案执行后，我们在执行Gulp 进程中，除第一次第二次，从第三次编译开始就是增量编译了，时间也将为1s 以内。...这套方案我们一直用了很长一段时间，直到我们的Gulp 工作流中更新到了Gulp 4。...Gulp 4 中自带了增量更新的方案gulp.lastRun() ，gulp.lastRun() 可以取代Gulp 3 中如gulp-cached 这类插件。
gulp.src告诉Gulp任务，所要使用的文件。gulp.dest`告知当任务完成后，Gulp输出文件的地址。 让我们来尝试构造一个真实的任务，将Sass文件编译成CSS文件。...如果特征存在，文件就会被匹配。 大部分Gulp工作流倾向于只要求4个不同的匹配模式。 1.*.scss:*特征是一个通配符，用来匹配当前路径中的一些特征文件。...表明，Gulp应该排除这个匹配的特征，当你要在匹配的文件中，排除一个文件，是非常有用的。倘若这样，not-me.scss将被排除出匹配。 4.*.....pipe(gulp.dest('app/css')) }) 其他在app/scss文件夹下找到的Sass文件，将自动被包括到sass任务中。...监视Sass文件更改 Gulp提供我们一个watch方法，监视是否有文件更改。
即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式 gulp.src([*.js,'!...b*.js']) //匹配所有js文件，但排除掉以b开头的js文件 gulp.src(['!...b*.js',*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中 此外，还可以使用展开模式。...为改变 console.log(event.path); //变化的文件的路径 }); 4、一些常用的gulp插件 gulp的插件数量虽然没有grunt那么多，但也可以说是应有尽有了，下面列举一些常用的插件...--save-dev gulp-sass var gulp = require('gulp'), sass = require("gulp-sass"); gulp.task('compile-sass
2，在 vue.config.js 中配置文件压缩选项 3，使用环境变量 4，使用别名 5，使用全局 less 变量 源码 参考链接 ---- 1，选择构建工具 在现在的前端开发中，前后分离、模块化、版本控制...Gulp是对整个过程进行控制，在其配置文件gulpfile.js中配置的每一个task。...例如：对sass文件进行预编译： gulp.task('sass',function(){ gulp.src('src/styles/*.scss') .pipe(sass().on('...error',sass.logError)) .pipe(gulp.dest('....}) ] 压缩的时候需要排除一些关键字，不能混淆，比如$或者require，否则会影响到代码正常运行。
.pipe()通过pipe()去处理找出来的文件，可以理解为管道 .pipe(gulp.dest())处理好的文件放到指定地方 复制html文件 var gulp=require('gulp').../xiangmu/dist')); }); 排除其它的文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src...'); }); 监听任务 gulp.task('watch', function () { gulp.watch('a/*',['hello']); }); 使用插件来扩展gulp的功能 Sass...插件 npm install gulp-sass --save-dev gulp.task('mysass', function () { return gulp.src('*.scss') ....pipe(sass()) .pipe(gulp.dest('.
比如，对sass文件进行预编译的task可以对其配置路径下的所有sass文件进行预编译处理： gulp.task('sass',function(){ gulp.src('src...}) ] 需要注意的是：压缩的时候需要排除一些关键字，不能混淆，比如$或者require，如果混淆的话就会影响到代码的正常运行。...然后在Gulp的配置文件gulpfile.js中通过CommonJs规范引入gulp-sass模块，并进行简单配置 ```js //1.引入 gulp-sass模块 var sass=...sass文件后保存，则立即执行sass预处理），配合Gulp启动的server则可以实现sass文件修改保存即可在浏览器中查看效果的目的，下一小节会介绍启动本地server。...4.
写作背景： 在前面几节我们学到了gulp 对外暴露的常用的几个 API，gulp 本身的 api 并不是很多，这一节我们就统一的来过一遍，最这些 API 有个认识。...Vinyl： vinyl 是描述文件呢的元数据对象，它的主要属性由 path 和 contents 组成，哦用来描述来自多个源的文件。...src api： 该 API 主要作用是创建一个流，用于在文件系统中读取 Vinyl 对象； dest api： 该 API 主要作用是将 Vinyl 对象输出到文件中。...series api： 该 API 在前面我们有介绍到，在 gulp 用来将不同的任务按串行顺序组合执行，并支持串行嵌套&串并行相互嵌套。...结语： 这一节简单说了说 gulp 对外暴露的几个 API 的作用，下一节找几个常用、使用的插件来演示一下，明天继续学习。
首先关于bootstrap从v3的less转到v4的sass的十万个为什么，这里暂且不表（计划会另起一篇文章对比less，sass，postcss）。...其次本篇文章主要围绕下面几个目标展开： 了解bootstrap 4整个sass的设计 如何使用并修改bootstrap v4的样式 如何改进bootstrap的sass设计 最后不深入具体代码的实现细节...，只从整体架构上分析 一起走进bootstrap v4 sass 1、bootstrap的sass文件都放在scss目录，为什么名字是scss而不是sass呢？...对于组件样式，需要就引入，不需要就不引入，但是一定要注意core与utility的样式，因为说不定你的组件中就用了这些基础的样式 如何改进bootstrap v4的sass设计 从个人实战的经验角度出发...，觉得bootstrap v4有如下几点缺陷：（仅为个人观点） 可以进一步进行目录规划，如把所有的组件文件都放在component目录，utility文件放在utility目录，那样看起来更有组织性，现在有点零散
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...该任务调用的模块,即上面定义的 var scss = require('gulp-sass'); .pipe(gulp.dest('css')); //将会在css文件夹下，生成对应的...var gulp = require('gulp'); var scss = require('gulp-sass'); 一开始我们需要初始化我们将要使用的所有插件。....pipe(scss()) 在这里，我们调用之前定义好的gulp-sass插件 .pipe(gulp.dest('css')); 最后，我们使用“gulp.dest”定义文件的目标文件夹。...第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件，第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。
"gulp": "^3.9.1" "gulp-sass": "^4.0.2" scss编译插件 "gulp-postcss": "^6.4.0" 强大的css处理插件 "gulp-rename...gulp配置打包sass非常简单，唯一需要注意的是@import的使用,wxss是支持样式导入的，但上面说到过小程序是天生的多页面应用，每一个页面都对应一个wxss，因此sass打包会把import的文件打包到当前文件...第二种是，在把文件交给sass处理前，我们先把import语句部分注释掉，这样sass处理的时候就会忽略了，当sass处理完成后，再把注释掉的语句打开即可。...启用gulp-sass编译scss文件， 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...拷贝其余页面，注意要排除scss文件，或者使用gulp-clean清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?
"gulp": "^3.9.1" "gulp-sass": "^4.0.2" scss编译插件 "gulp-postcss": "^6.4.0" 强大的css处理插件 "gulp-rename":...gulp配置打包sass非常简单，唯一需要注意的是@import的使用,wxss是支持样式导入的，但上面说到过小程序是天生的多页面应用，每一个页面都对应一个wxss，因此sass打包会把import的文件打包到当前文件...第二种是，在把文件交给sass处理前，我们先把import语句部分注释掉，这样sass处理的时候就会忽略了，当sass处理完成后，再把注释掉的语句打开即可。...启用gulp-sass编译scss文件， 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...拷贝其余页面，注意要排除scss文件，或者使用gulp-clean清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?
, 切换到项目目录 => 输入指令 $ npm install gulp -D 4..../a/**') -> 找到指令目录下的所有文件 2-4. gulp.src('..../abc') -> 把他接收到的内容放到 abc 目录下 4. gulp.watch() => 语法: gulp.watch(路径信息, 任务名称) => 作用: 监控指定目录下的文件...3. $ npm i gulp-sass -D => 导入: const sass = require('gulp-sass') => 导入以后得到一个可以处理流文件的函数, 直接再管道函数里面执行就可以了...4. gulp-uglify => 把 JS 文件压缩的 => 下载: npm i -D gulp-uglify => 导入: const uglify = require('gulp-uglify
本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载 首先关于bootstrap从v3的less转到v4的sass的十万个为什么，这里暂且不表（计划会另起一篇文章对比less...其次本篇文章主要围绕下面几个目标展开： 了解bootstrap 4整个sass的设计 如何使用并修改bootstrap v4的样式 如何改进bootstrap的sass设计 最后不深入具体代码的实现细节...，只从整体架构上分析 一起走进bootstrap v4 sass 1、bootstrap的sass文件都放在scss目录，为什么名字是scss而不是sass呢？...对于组件样式，需要就引入，不需要就不引入，但是一定要注意core与utility的样式，因为说不定你的组件中就用了这些基础的样式 如何改进bootstrap v4的sass设计 从个人实战的经验角度出发...，觉得bootstrap v4有如下几点缺陷：（仅为个人观点） 可以进一步进行目录规划，如把所有的组件文件都放在component目录，utility文件放在utility目录，那样看起来更有组织性，现在有点零散
6a9cf162bfcc59cae7aef0cacbe655ed.jpeg .gitignore文件 默认情况下，.gitignore用于确定在npm publish期间被列入黑名单的内容。...# .gitignore dist/ .env* .npmignore文件 但是如果.npmignore存在，那么它优先于.gitignore： # .npmignore dist/ 注意：请确保包含所有被忽略的文件...这意味着将发布与.env*模式匹配的文件。
sass 用法 1.基本用法 1 >变量 SASS 允许使用变量，所有变量以$开头。 ...比如 a:hover 伪类，可以写成： a { &:hover { color: #ffb3ff; } } 4>注释 SASS 共有两种注释风格。...标准的 CSS 注释 /_ comment _/ ，会保留到编译后的文件。 单行注释 // comment，只保留在 SASS 源文件中，编译后被省略。 在/*后面加一个感叹号，表示这是”重要注释”。...插入文件 @import 命令，用来插入外部文件。...这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。
一、css预处理方案 这块没什么好说的，由于本人只对sass比较熟悉，就引入了sass和compass。以及引入了gulp构建工具作为整体构建流程的控制。 二、前端工程化与按需加载 1....rollup打包的模式更丰富，打包后的文件结构也更为清晰 rollup可以按需排除一些第三方引入库，这让我做requirejs按需加载时控制第三方库的版本更为有效。...2. assets文件夹 skin(皮肤样式)的sass源码，皮肤的编译是通过gulp任务完成的。 3. build文件夹 提供rollup打包的配置。...4. src文件夹 业务模块的源码目录，此目录下的代码需要通过rollup编译后，才可使用。master模块是一个示例模块。...gulpfile.js作为gulp构建任务的入口，实现了sass的编译、dev模式任务。 6.
文章目录 导读 实验 C语言Linux编程实现 导读 有时候我们在Linux下删除某个文件夹内的所有文件时需要排除一些文件。.../config: setting.ini [root@TrueDei test]# 查询并排除我们想排除的文件 grep命令，应该很常用，可以过滤出来我们想要的数据。...如果需要排除我们不想要的数据的话，Linux也提供了一个egrep命令； # 查看所有的文件 [root@TrueDei test]# ls ./* ./a.txt ./b.txt ..../config: setting.ini [root@TrueDei test]# # 排除setting.ini文件 [root@TrueDei test]# ls ./* |egrep -v.../config: [root@TrueDei test]# [root@TrueDei test]# # 排除c.txt和setting.ini文件 [root@TrueDei test]# ls
->Cnpm 4．安装gulp【特别说明：gulp需要安装两次，一全局，一局部】 a) 全局安装gulp 5．跳转本地项目目录 6．安装package.json配置文件 7．安装本地...4．安装全局gulp 全局安装（全局安装gulp目的是执行gulp任务） 安装命令：cnpm install gulp -g 安装完毕后，看一下版本号有没有(命令行输入：gulp -v)，就知道有没有安装成功了...1 var gulp = require('gulp');//引入gulp库 2 // 引入组件 3 var jshint = require('gulp-jshint'); 4 var sass...api 详解 （说句人话就是gulpfile.js文件代码解读） 一个gulp-sass任务的案例： // 编译Sass 1 gulp.task('sass', function() { 2 3.../scss/*.scss') 4 5 .pipe(sass()) 6 7 .pipe(gulp.dest('.
云服务器
ICP备案
对象存储
云直播
实时音视频
