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')...: '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...47 gulp.task('default', ['watch', 'pug' ]); 没有热更新和浏览器自动刷新功能，只是适用于编译sass和pug，并且有持续监听、不断开gulp的功能、还有pug
不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展名不同，来看一个简单的对比图： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传...文件路径>/style.scss:文件路径>/style.css 当然，使用 sass 命令编译时，可以带很多的参数： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传...文件有任何修改，只要我重新保存了修改的文件，命令终端就能监测，并重新编译出文件： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bDEoGEk1-1652968509991...= require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('..../css')); }); gulp.task('watch', function() { gulp.watch('scss/*.scss', ['sass']); }); gulp.task
gulp-notify": "^2.2.0", "gulp-rename": "^1.2.2", "gulp-ruby-sass": "^2.0.6", "gulp-sitemap...有一点需要注意的地方，gulp-ruby-sass需要有ruby语言环境，这是安装传送门Ruby，一般Mac会自带Ruby。...) imagemin = require('gulp-imagemin') sass = require('gulp-ruby-sass') minifycss = require...gulp.task 'styles', -> return sass('..../dist/css/') extend任务会将模版文件解析并生成相应的html js压缩js image对图片资源进行无损压缩 clean清空编译目录 sitemap生成站点地图，便于SEO watch
前言 很多自定义播放器，和自定义多选相册的图片都是需要先获取系统图片库中的所有图片资源或者视屏资源 ，所使用的核心方法就是AssetsLibrary框架里的ALAssetsLibrary。...enumerateGroupsWithTypes:ALAssetsGroupAll usingBlock:^(ALAssetsGroup *group, BOOL *stop) { if (group) { #获取所有...video资源，当然也可以获取所有图片资源,本地语音备忘录中的语音是无法获取的， #曾经努力了很久也无法获得，如果知道怎么获取的朋友，一定要告诉我下，多谢。...]; }); } } failureBlock:^(NSError *error) { NSLog(@"Failed."); }]; } //将创建日期作为文件名...NSString* dateString = [dateFormatter stringFromDate:date]; return dateString; } 由于相册视频不能获取到绝对地址
什么是流 流文件: 流 => 一种文件传输的格式 => 一段一段的文件传输 流格式: 流 => 从头到尾的一个过程 => 需要从 源 开始一步一步经过加工 -> 每一个步骤需要依赖上一步的结果...sass + images 图片 + videos 视频 + audios 音频 + lib 第三方文件...=> 直接再管道函数里面使用, 需要传递参数 -> { browsers: [要兼容的浏览器] } 3. gulp-sass => 下载: npm i gulp-sass -D...-> 很容易报错, 基本下载不成功 -> 为什么: 因为 gulp-sass 依赖另一个第三方, node-sass => node-sass 很难下载成功 => 以前都是再一个地方下载...3. $ npm i gulp-sass -D => 导入: const sass = require('gulp-sass') => 导入以后得到一个可以处理流文件的函数, 直接再管道函数里面执行就可以了
该任务调用的模块,即上面定义的 var scss = require('gulp-sass'); .pipe(gulp.dest('css')); //将会在css文件夹下，生成对应的...Gulp是一个构建工具， 利用 Node.js 流实现自动化异步源（ source-destination ）。...Globs Globs是引用文件的通配符模式。globs(glob 字符串)或glob的数组用作任务源中的输入。 Watchers 当检测到更改时，Watchers观察源文件以进行更改和调用任务。....pipe(scss()) 在这里，我们调用之前定义好的gulp-sass插件 .pipe(gulp.dest('css')); 最后，我们使用“gulp.dest”定义文件的目标文件夹。...return gulp.src(['scss/**/*.scss', '!scss/**/_*']) 在这个例子中，Gulp源提供了一个glob数组。
可见LESS，SASS之流行。...SASS十分钟入门：http://www.w3cplus.com/sassguide/ SASS一瞥 ?...使用GULP，可以完成文件压缩，JS混淆，编译SASS，LESS 等，基本上你想要的功能，都可以通过代码实现。在项目，我还用GULP来下载文件，更新本地的JSON数据。...安装超时的同学，建议使用淘宝npm源，具体可见CNPM STEP-2：克隆我事先写好的git懒人模板仓库 ?...STEP-3：查看仓库README文件 在终端运行： npm install（安装超时的同学，建议使用淘宝npm源，具体可见CNPM） ?
让我们开始在你的电脑上安装Gulp吧。 安装Gulp 在你安装Gulp之前，需要安装Node.js（Node)环境。 如果你没有安装，你可以在这个网页来获取安装包。...gulp.src告诉Gulp任务，所要使用的文件。gulp.dest`告知当任务完成后，Gulp输出文件的地址。 让我们来尝试构造一个真实的任务，将Sass文件编译成CSS文件。....pipe(gulp.dest('app/css')) }) 其他在app/scss文件夹下找到的Sass文件，将自动被包括到sass任务中。...second-stylesheet.png 我们现在可以通过一个命令，管理所有Sass文件编译成CSS文件。但是问题是，有什么可以让我们不用每次都手动运行gulp sass，将Sass编译成CSS？...监视Sass文件更改 Gulp提供我们一个watch方法，监视是否有文件更改。
比如，对sass文件进行预编译的task可以对其配置路径下的所有sass文件进行预编译处理： gulp.task('sass',function(){ gulp.src('src...然后在Gulp的配置文件gulpfile.js中通过CommonJs规范引入gulp-sass模块，并进行简单配置 ```js //1.引入 gulp-sass模块 var sass=...sass文件后保存，则立即执行sass预处理），配合Gulp启动的server则可以实现sass文件修改保存即可在浏览器中查看效果的目的，下一小节会介绍启动本地server。...在项目中通过npm安装一个**sass-loader**和**node-sass**模块，前者是用来加载sass相关文件的，后者是用来编译sass文件的。...所以，``livereload:true``属性只是监控到我们修改文件后刷新浏览器重新请求文件，如果我们不重新编译修改后的文件，浏览器获取到的还是原文件，并不会展示变化。
来打包组件的样式代码： gulp 主要通过定义任务并使用流式的处理方式使用不同的管道依次进行，我们主要处理 scss 文件内容为 css 文件。...需要用到的模块如下： gulp-sass，因版本问题需要额外导入 sass 模块。 gulp-minify-css：主要用来对 css 文件进行压缩。...完整的打包配置如下： 配置文件指明了操作的文件入口为css 目录下的 scss 结尾的文件； 文件输出到 dist/css 目录下； 方便执行我们配一下打包命令："build:css": "npx gulp...const gulp = require("gulp"); const sass = require("gulp-sass")(require("sass")); const minifyCSS = require...("gulp-minify-css"); gulp.task("sass", async function () { return gulp .src("components/css/**
有用过Sass 这类CSS 预处理器都知道10s+ 意味着什么，你每保存一次.scss 文件，都必须等上10s 以上才能看到你所改动的效果。如此一来十分尴尬，因为你直接写原生的CSS 语法比这还快。...初级玩家的玩法 Gulp 工作流中集成Sass 编译一般都是用gulp-sass 这个模块，本质上gulp-sass 调用的是node-sass（C++ 版的Sass）。...兼顾Sass 依赖关系的增量编译 熟悉的CSS 预处理器的都知道，一个scss 文件中可能会（被）@import，@include ，@extend 了外部scss 或相关代码段。...解决方法也呼之欲出了，在cached() 与 sass() 的pipe 的中间我们还需要一个步骤，即将传入的改动文件找出其上下关系的依赖文件，整体文件集传入到 sass() 的pipe 去执行编译。...社区中也早早有这个解决方案，sass-graph 便是这么个专门分析依赖文件的第三方模块。
var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps...'); // sass 编译 gulp.task('sass:dev', function() { return gulp.src('dev/sass/**/*.scss') .pipe(...└─ config.js # RequireJs 的配置文件 └─ sass/ # 存放 sass 的目录 ├─ app/...配置文件 命令 $ gulp help # 说明帮助 $ gulp sass # sass 本地编译 $ gulp jshint...// 打包 css 文件 gulp.task('build:css', function(cb) { runSequence( 'usemin:css', 'sass
pip install -i https://pypi.douban.com/simple django==2.0.2 进front目录 npm init #初始化一个package.json配置文件文件....css改为sass 安装sass包 npm install gulp-sass --save-dev ?...把index.css改成index.scss文件 ?...gulpfile.js修改 var sass = require("gulp-sass"); // css任务 gulp.task("css",done =>{ gulp.src("....sass = require("gulp-sass"); //html任务 gulp.task("html",done =>{ gulp.src(".
"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清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?
/js/*.js') // * 匹配js文件夹下所有.js格式的文件 gulp.src('..../dist')); gulp-filter 描述：在虚拟文件流中过滤文件。.../dist')) gulp-sass 描述：编译sass。 var sass = require('gulp-sass'); gulp.src('..../sass/**/*.scss') .pipe(sass({ outputStyle: 'compressed' // 配置输出方式,默认为nested.../sass/**/*.scss', ['sass']); // 实时监听sass文件变动,执行sass任务 gulp-babel 描述：将ES6代码编译成ES5。
【新建查询】-【从文件】-【Excel文件】的方式，如下图所示： 三、当前Excel文件【从表格】导入与外部Excel文件【从文件】导入的差异 当前Excel工作簿的数据导入也可以采用本文下一种...导入后（生成代码）结果如下： 使用“外部Excel文件”导入的方式，导入的数据会指向一个固定的“绝对路径”（本示例操作时源文件放在D盘根目录下），因此，一旦数据源（被导入文件）改变存放位置，需要在PQ...中手工调整数据源的文件路径才能使用。...导入后（生成代码）结果如下： 因此，在获取当前Excel文件中的数据时，建议尽量使用【从表格】的直接导入方法，外部Excel文件导入前，应尽量确保该文件存放在相对固定的位置，避免日后使用的麻烦...查看本文从外部Excel文件导入数据示例时，请将示例文件放在D盘根目录下，并不要修改文件名。
"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清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?
当然我们还需要进行scss的转换，安装 yarn add sass gulp-sass --save-dev 复制代码 然后我们再进行一下改造 gulpfile.js const { src, dest...} = require('gulp') const sass = require('gulp-sass')(require('sass')); // 5.0版本的gulp const style...我们要用7.1.0版本的imagemin 复制代码 文件修改 const imagemin = require('gulp-imagemin') const image = () => { return...('gulp-sass')(require('sass')); // 脚本编译 const babel = require('gulp-babel') // 模板 const swig = require...，像sass我们就可以直接plugins.sass(),plugins.imagemin()等等 例如 gulp-sass就是plugins.sass，如果是gulp-sass-sass这种类型，就是
对于 CSS 预编译，有 gulp 对应的 sass、less、postcss 插件可选；对于图片压缩，可以使用 gulp 的 imagemini 插件，再装上各种图片的格式对应的压缩库即可。...对于 CSS 预编译来说，如使用 postcss，从 CSS 文件到 WXSS 文件比较好解决。但是又引出了两个新问题： CSS 文件最好是不要打包发布。...最好避免误修改 WXSS 文件，而是直接修改 CSS 文件。...第一个我们可以在项目配置文件中设置上传代码的时候过滤 CSS 文件；第二个我们可以在 VSCode 编辑器中隐藏 WXSS 文件，避免误操作。...如 background 不支持本地图片。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
