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...47 gulp.task('default', ['watch', 'pug' ]); 没有热更新和浏览器自动刷新功能，只是适用于编译sass和pug，并且有持续监听、不断开gulp的功能、还有pug
Gulp预处理 在Gulp中，我们可以将Sass编译成CSS，使用一个叫做gulp-sass的插件。...表明，Gulp应该排除这个匹配的特征，当你要在匹配的文件中，排除一个文件，是非常有用的。倘若这样，not-me.scss将被排除出匹配。 4.*....second-stylesheet.png 我们现在可以通过一个命令，管理所有Sass文件编译成CSS文件。但是问题是，有什么可以让我们不用每次都手动运行gulp sass，将Sass编译成CSS？...第一个任务集是一个开发进程，我们可以用它编译Sass到CSS，监视文件的修改，从而重新加载浏览器。 第二个任务集是压缩进程，我们为生产网站准备了所有文件。...我们也构建了第二个任务，build,创建一个dist文件夹给生产用网页。我们编译Sass为CSS，压缩我们所有的资源文件以及复制必要的文件夹到dist文件夹。
虽然协作的同岗位同事也是同一个组的，但使用的Gulp 工作流却有些不一样。第一天做项目需求的时候，就遇到了一件让我瞠目结舌的事情：这里的Sass 编译一次居然要10s 以上。...兼顾Sass 依赖关系的增量编译 熟悉的CSS 预处理器的都知道，一个scss 文件中可能会（被）@import，@include ，@extend 了外部scss 或相关代码段。...解决方法也呼之欲出了，在cached() 与 sass() 的pipe 的中间我们还需要一个步骤，即将传入的改动文件找出其上下关系的依赖文件，整体文件集传入到 sass() 的pipe 去执行编译。...4 中的增量编译 上面的这套方案执行后，我们在执行Gulp 进程中，除第一次第二次，从第三次编译开始就是增量编译了，时间也将为1s 以内。...这套方案我们一直用了很长一段时间，直到我们的Gulp 工作流中更新到了Gulp 4。
前言 我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1… 本次目标 es6 转换成 es5 图片压缩 scss编译 模板html...编译 安装gulp yarn add gulp --dev 复制代码 安装完毕之后我们就开始进入正题 样式编译 首先我们使用gulp进行scss的样式编译 gulpfile.js const { src...() => { // 所有子目录下面的html文件 // return src('src/**/.*/.html', {base: 'src'}) return src('src/*.html.../package.json'), date: new Date() } ... const page = () => { // 所有子目录下面的html文件 // return src('src...') const plugins = loadPlugins() 复制代码 这里我们注意一些点 // 样式编译 const sass = require('gulp-sass')(require('sass
另外我们知道Gulp是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个task对项目中该task配置路径下所有的资源都可以管理。...比如，对sass文件进行预编译的task可以对其配置路径下的所有sass文件进行预编译处理： gulp.task('sass',function(){ gulp.src('src...### Gulp预编译sass/less 以sass为例子： 1....console.log('所有任务队列执行完毕'); }); ``` 这样，一个简单的sass预处理的task就配置完成了，然后我们还将该task加到gulp.watch()上实现了自动编译（即修改...在项目中通过npm安装一个**sass-loader**和**node-sass**模块，前者是用来加载sass相关文件的，后者是用来编译sass文件的。
前言 本节为大家讲解腾讯云主机上测试BootStrap4编译FlexBox的过程。 首先Flexbox是什么？它是Bootstrap4新出的一个布局格式，对移动端开发非常方便。...gulp 开始抽取 下载之后打开Bootstrap源代码文件夹，找到scss目录，可以看到如下的结构，在这里我用IDE打开更直观。 mixins是一些可调用的组件，本身编译不会产生任何结果。...在源代码中我们可以发现已经有了一个bootstrap-flex.scss的文件，然而这里面发现直接引入了bootstrap的所有代码，这并不是我们想要的，它可能会复写一些基本样式，会影响我们的工程。...编译代码 官方用的是grunt自动化工具，然而我用着并不习惯。在这里我们用到gulp来编译。...然后生成一个.babelrc文件，因为我们要用es2015的语法，内容。
/js/*.js') // * 匹配js文件夹下所有.js格式的文件 gulp.src('....匹配除了index.js之外的所有js文件 gulp.src('.....pipe(gulp.dest('dist')); // 再对所有文件操作，包括index.js 压缩 gulp-uglify 描述：压缩js文件大小。.../dist')) gulp-sass 描述：编译sass。 var sass = require('gulp-sass'); gulp.src('..../sass/**/*.scss', ['sass']); // 实时监听sass文件变动,执行sass任务 gulp-babel 描述：将ES6代码编译成ES5。
什么是 npm Scripts Node.js 项目下一般都有一个 package.json 文件，文件的内容类似这样： { "name": "node-js-sample", "version...如用用 Gulp 来做同样的事，就只能找 Gulp 的插件来做了（Grunt 也一样）。 进入正题 我做了一个前端脚手架项目:front-end-scaffold(还处于 Alpha 状态)。...监视 Sass 文件的变化。变化时，编译生成 CSS 以及 sourcemap。用 Compass。 监视 ES6 文件的变化。变化时，编译生成 ES5 的 JS 以及 sourcemap。...将 ES6 代码编译成 ES5 代码，合并（如果有需要的话），并压缩。用 Webpack + Babel。 将 Sass 代码编译成 CSS 代码，并压缩。用 Compass。...将 源代码目录下的除了 ES6 和 Sass 代码外的其他代码都移动到发布文件目录下。用 Gulp。用 Gulp 是为了跨平台，如果不要跨平台，可以用当前平台的命令行的命令来做移动目录会更简单。
小tips：用dir看清楚这个地方的所有文件，然后cd定位过去 示例： 比如我现在是在管理员目录下 ? 想去桌面看看： ? 回车 ? 我就到了桌面了 然后想看桌面下的文件目录 ? 回车 ?...或者（ gulp taskName） 直接调用gulp或者输入gulp+任务名称 比如在上边的gulpfile.js里边，我想调用sass任务，就直接在命令行输入gulp 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('..../*.scss', ['sass']); 17 gulp.watch("*.html").on('change', reload); 18 }); 19 20 //编译sass。
gulp 初试用 在用了 Grunt 的一段时间内，越来越觉得自己离不开构建工具。但是，Grunt 的构建速度让我有点苦恼，即使是编译 sass 也需要花上一段时间。...下面代码是使用 gulp 初次来编译 sass，由于一直都有点习惯了 Grunt 那编译速度单位为秒级别的速度，刚输入命令还没反应过来，就已经以毫秒级的速度编译完了。...'); // sass 编译 gulp.task('sass:dev', function() { return gulp.src('dev/sass/**/*.scss') .pipe(...配置文件 命令 $ gulp help # 说明帮助 $ gulp sass # sass 本地编译 $ gulp jshint...，最终每个页面都打包一个 js 文件为单入口。
")); } exports.default = build; gulp-rename： 可以便捷的在输出编译产物到文件中时对文件命名进行调整，已适应不同的场景。...(); return src("src/*.js") .pipe(uglify()) .pipe(dest("output")); } gulp-sass： 将我们编写的 sass 文件编译为浏览器可以正常识别的...css 文件，我们要同时安装 sass 和 gulp-sass 插件。...const sass = require('gulp-sass')(require('sass')); 下面的代码是 sass 教程的第一块内容，将变量插入到最后编译的结果中。...： 支持我们在编译后打开一个文件或 URL，往往在开发过程中使用的 CLI 都提供了这样的一个功能，方便我们在启动项目后就默认给我们打开了首页。
会生成名为package.json的文件。 $ npm init 导入包 这个我构建好的json文件，将devDependencies下的所有节点复制过去。...下面是我对gulp任务，使用CoffeeScript，然后我会讲解一个任务。...', 'watch'] styles任务，会将scss目录下的样式文件编译成css，然后autoprefixer方法会自动添加不同浏览器的前缀，concat合并成一个文件style.css后会使用minifycss.../dist/css/') extend任务会将模版文件解析并生成相应的html js压缩js image对图片资源进行无损压缩 clean清空编译目录 sitemap生成站点地图，便于SEO watch...监听文件，当发生改动时调用相应的任务 build用于构建编译文件 default默认任务，使用gulp命令执行的任务 browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼 rebuild
（绿色部分为需要安装的组件）另sass编译需提前安装ruby。...--save-dev 4 */ 5 // 加载插件 6 var gulp = require('gulp'),//加载gulp 7 sass = require('gulp-sass...'),//编译sass 8 autoprefixer = require('gulp-autoprefixer'),//补全浏览器前缀 9 minifycss = require('...gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件 24 .pipe(sass()) 25 .pipe(autoprefixer...：gulp+回车=进行单次编译 10、gulp watch监听文件修改自动执行，Ctrl+C停止监听 以上内容来自网络整理及实际操作，如有不当欢迎讨论
你可以从toptal-gulp-tutorial/step1下载入门工具包，帮助你完成第一个任务。它包含一个将SCSS文件编译为 cs的简单任务。...此时您可以运行第一个任务。运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中： gulp scss 请注意，在本示例中，我们指定了要运行的任务。...var gulp = require('gulp'); var scss = require('gulp-sass'); 一开始我们需要初始化我们将要使用的所有插件。...为了启动它，请使用以下命令： gulp 这个命令启动名为 “default”并开启watcher.的任务，此时，您可以编辑任何SCSS文件，并重新编译CSS文件。...第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件，第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。
Gulp 前端自动化构建工具 中，已经对 Gulp 有了初步的了解，我们通过将所有任务写到 gulpfile.js 文件中进行编译，这当然是最直观的方法，但当我们需要执行的任务过多时，gulpfile.js...文件就会变的特别的巨大，这很不利于我们之后的维护及修改，所以我们要做的第一件事就是将 gulpfile.js 文件进行分割，分成一个个小的任务文件，每一个文件只完成特定的任务，这也是我们常说的模块化处理.../gulp/tasks', { recurse: true }); 图片 根据上图我们可以看到，gulp 文件夹下有一个 config.js 文件，主要是各任务的路径匹配及文件配置，具体如下图所示 图片...，我们将经过审查编译压缩过后的代码进行编码，而不会影响之前已执行的操作，若是任务执行的顺序相反，则会导致编码过后的文件无法执行后续的操作，同样的，在 build.js 中，我们也是先执行其他任务，最后才执行...(size()) }) 图片 图片 细心的童鞋可能发现了，在 production 目录下有 4 个 optimize.js 文件，分别是对应 HTML CSS JS Images 文件，尽管我们建立这些任务
Program 制定开发规范，提高团队协作能力； 使用自动化编译工具使项目支持各种插件和提高效率的工具； 模块/组件化开发; 所有需要集中管理的地方进行统一封装； 部署 环境切换； 压缩打包； 项目搭建...根据要解决的问题来看，无非是文件的编译，修改，拷贝这些处理，对于这些需求，我们想到基于流的 gulp非常的适合处理，并且相对于webpack配置多页应用更加简单。..."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的文件打包到当前文件...启用gulp-sass编译scss文件， 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释
Program 制定开发规范，提高团队协作能力； 使用自动化编译工具使项目支持各种插件和提高效率的工具； 模块/组件化开发; 所有需要集中管理的地方进行统一封装； 部署 环境切换； 压缩打包； 项目搭建...根据要解决的问题来看，无非是文件的编译，修改，拷贝这些处理，对于这些需求，我们想到基于流的 gulp非常的适合处理，并且相对于webpack配置多页应用更加简单。..."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的文件打包到当前文件...启用gulp-sass编译scss文件， 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释
package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了） 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样：...下面统一介绍几个常见的 插件，更详细用法可以到对应官方站点查看API sass的编译（gulp-ruby-sass） 自动添加css前缀（gulp-autoprefixer） 压缩css（gulp-minify-css...然后进入 gulpfile.js文件，先直接require var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer....pipe(autoprefixer('last 2 version','safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))...; }); 解释一下，其实就是 将sass文件编译成css，以流的形式pipe结果，再加css前缀，修改后缀为.min.css，并作资源压缩，最后成功后返回done的消息 命令行键入
Gulp是对整个过程进行控制，在其配置文件gulpfile.js中配置的每一个task。...例如：对sass文件进行预编译： gulp.task('sass',function(){ gulp.src('src/styles/*.scss') .pipe(sass().on('...error',sass.logError)) .pipe(gulp.dest('..../build/prd/styles/'));//编译后的输出路径 }); 上面这个task可以对'src/styles/*.scss'目录下的所有以.scss结尾的文件进行预处理。...Gulp可以对 css、js 文件进行合并与压缩，而 Webpack可以实现对css、js、html、图片文件等进行合并与压缩，还可以对js文件进行编译，如es6->es5等。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
