json文件内不能写注释，所以package文件内也不能有注释信息 Gulpfile.js——gulp项目配置文件 全局目录：管理员目录C:\Users\Administrators。..../ 也可以返回上一级目录 有这几个命令就够用了，另外别问我怎么回到全局(后来发现我的电脑是直接按 C: 回车就可以，不知道其他的)，我都是点了cmd右上角的叉叉然后重新打开的。。。...或者（ gulp taskName） 直接调用gulp或者输入gulp+任务名称 比如在上边的gulpfile.js里边，我想调用sass任务，就直接在命令行输入gulp sass 如果我想调用所有的...// 编译Sass 1 gulp.task('sass', function() { 2 3 gulp.src('....change', reload); 18 }); 19 20 //编译sass。
所以这就是这篇文章所要做的。它将帮助你入门Gulp，你就可以自己探索其他任何东西。 在我们投入Gulp的学习之前，让我们来讨论一下，为什么你可能希望使用Gulp，而不是其他相似的工具。...但是这儿还有其他工具，broccoli聚焦于资源文件的编译，是一个最常见的构建工具之一。 这儿已经有大量文章覆盖Grunt和Gulp的区别以及为什么你可能使用其中一个。...Gulp预处理 在Gulp中，我们可以将Sass编译成CSS，使用一个叫做gulp-sass的插件。....pipe(gulp.dest('app/css')) }) 其他在app/scss文件夹下找到的Sass文件，将自动被包括到sass任务中。...结束 我们已经经过了Gulp的基础以及创建了一个工作流，可以将Sass编译成CSS，同时监测HTML和JS文件发生改变。我们可以在命令行通过gulp命令运行这个任务。
配置gulpfile.js 说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。...此外，通过自动化你的流程，你可以专注于手头的工作，而不是暂时离开“ the zone”状态（你 达到最高效率的那种神奇的境界）。...gulpfile.js gulp项目的配置文件。它包含从任务（tasks）到Watchers或任务使用的其他代码片段的所有内容。...它包含一个将SCSS文件编译为 cs的简单任务。它使用一个名为 gulp-sass插件，这个插件基于libsass。...现在，你可以为其他自动化流程创建新的观察者，例如JavaScript连接，代码提示，CoffeeScript编译或其他可能出现的任何操作。
如果说我们在项目中使用 LESS，或者 SASS 作为 CSS 的预编译语言（浏览器本身是不支持 LESS，SASS 文件的，难道每次还要使用类似与考拉软件去处理这些吗？）...如果我想找一个东西帮我去处理上面的这些东西，我写的还是没有压缩的 JS 或者 CSS/less/sass 等，但是在页面上实际上运行（或者等到项目发布的时候替换为压缩过的文件），那么 gulp 就是你很好的选择...不错，它就是来处理上述这些事情的，而且我们在编辑器里修改的代码都是在 src 的目录下，而 dist 文件目录就是经过上述处理过后的文件目录，江湖人称编译过后的文件目录，而 gulp 就是起到了这个桥梁的作用...例如在我的 src 目录里面存在一个 css 文件夹，里面装了很多 css 或者 LESS 等样式文件，我现在想通过 gulp 将它编译到 dist 目录下面的 css 文件夹里面并且这个 css 文件夹里的样式文件还是压缩过了...我要投稿 本公众号长期欢迎大家踊跃投稿，投稿内容不限，可以是 Bio+IT 相关的编程、算法、统计、可视化、程序应用、运维等方面的经验知识；也可以是学习、生活、工作中的吐槽见闻。
前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，...js | |——styles：文件和scripts文件夹下基本一致（本例中我引用了第三方框架，目录更深，不在展示） |——gulpfile.js: gulp的配置文件 |——index.html...大体介绍了一下我理解的模块化的思想，但是需要指出的是Gulp对js文件的模块化工作是通过Webpack实现的，具体来说是通过安装gulp-webpack模块和相关的loader模块进行js模块化管理的。...## sass/less预编译 我们再来看看sass/less预编译，其实就sass/less的预编译来说，两者区别不是很大。...}，2.刷新浏览器请求最新编译后的文件**）和热替换(HMR)；而**gulp-server**虽然提供了启动本地server的能力和仅自动刷新浏览器的能力，缺少一个文件自动编译的能力，这需要借助其他模块实现
gulp 初试用 在用了 Grunt 的一段时间内，越来越觉得自己离不开构建工具。但是，Grunt 的构建速度让我有点苦恼，即使是编译 sass 也需要花上一段时间。...下面代码是使用 gulp 初次来编译 sass，由于一直都有点习惯了 Grunt 那编译速度单位为秒级别的速度，刚输入命令还没反应过来，就已经以毫秒级的速度编译完了。...gulp 打包 requirejs 目前我的项目是一个页面一个 js 入口，比如登录页面的入口是 login.js，而主页面的入口是 home.js，它们都是在同一个目录下。...还有，由于项目原因，开发的时候不能使用到 127.0.0.1 ，想换成 php 配置的域名怎么做？...所以接下来的工作就是职责分工，独立完成各自的构建工作。
Gulp 简单介绍 Gulp 在官网的 title 是：用自动化构建工具增强你的工作流程，即一款基于流的前端自动化构建工具。作为前端的菜鸟，第一次听到这样的描述，是不是跟小编一样满头雾水？...如果说我们在项目中使用 LESS，或者 SASS 作为 CSS 的预编译语言（浏览器本身是不支持 LESS，SASS 文件的，难道每次还要使用类似与考拉软件去处理这些吗？）...如果我想找一个东西帮我去处理上面的这些东西，我写的还是没有压缩的 JS 或者 CSS/less/sass 等，但是在页面上实际上运行（或者等到项目发布的时候替换为压缩过的文件），那么 gulp 就是你很好的选择...不错，它就是来处理上述这些事情的，而且我们在编辑器里修改的代码都是在 src 的目录下，而 dist 文件目录就是经过上述处理过后的文件目录，江湖人称编译过后的文件目录，而 gulp 就是起到了这个桥梁的作用...例如在我的 src 目录里面存在一个 css 文件夹，里面装了很多 css 或者 LESS 等样式文件，我现在想通过 gulp 将它编译到 dist 目录下面的 css 文件夹里面并且这个 css 文件夹里的样式文件还是压缩过了
这里有很多为什么我们需要尝试那些新技术的理由。不管我们用什么，总之，我们还是希望使用那些能够处理在浏览器端的方案，所以出来了编译方案。...这是一个很好的解决方案，但是请相信我，你不会想看到一个 300 行的 Gruntfile。...abbreviated a bit: Gulp 提供了一个不一样的解决方案，而不是依赖于各种插件的配置。...，比如你想在 CoffeeScript、Sass、Markdown 或者其他什么代码中 require 你想要的任何代码的话？...那么 Webpack 正是做这方面的工作。它会通过配置来取出代码中的依赖，然后把他们通过加载器把代码兼容地输出到静态资源中。
前言 我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1… 本次目标 es6 转换成 es5 图片压缩 scss编译 模板html...编译 安装gulp yarn add gulp --dev 复制代码 安装完毕之后我们就开始进入正题 样式编译 首先我们使用gulp进行scss的样式编译 gulpfile.js const { src...文件 当然我们还需要进行scss的转换，安装 yarn add sass gulp-sass --save-dev 复制代码 然后我们再进行一下改造 gulpfile.js const { src, dest...，我们每次打包的时候的文件删除，总不能每次都我们进行手动删除吧？...: { sass: () => { return sass } } }) 复制代码 热更新 不多比比直接上 npm i browser-sync --dev 复制代码 gulpfile.js
Gulp 前端自动化构建工具 中，已经对 Gulp 有了初步的了解，我们通过将所有任务写到 gulpfile.js 文件中进行编译，这当然是最直观的方法，但当我们需要执行的任务过多时，gulpfile.js...，亦可通过下载整个项目进行学习，需要注意的是，插件的更新或是依赖包的缺少都可能导致项目无法正常运行，可根据报错信息进行依赖包的更新或修改 而 gulpfile.js 文件非常的短，只有短短两行，我们通过...watch 文件进行更改，在这里只是提供一个示例方法 CSS 依赖包 接下来我将根据作用的文件类型不同，来对所引入的依赖包来作简单的介绍，而关于各插件的更多用配置及用法，还请查看相应插件的 Github...，我们将经过审查编译压缩过后的代码进行编码，而不会影响之前已执行的操作，若是任务执行的顺序相反，则会导致编码过后的文件无法执行后续的操作，同样的，在 build.js 中，我们也是先执行其他任务，最后才执行...watchify 插件可以加速 browserify 的编译，而 vinyl-source-stream 把普通的 Node Stream 转换为 Vinyl File Object Stream，我们在之前的文章有提到过
前言 本节为大家讲解腾讯云主机上测试BootStrap4编译FlexBox的过程。 首先Flexbox是什么？它是Bootstrap4新出的一个布局格式，对移动端开发非常方便。...说一下我为什么要提取Flexbox。有需求才有动力，首先是需求，最近在开发一个移动端适配的网站，使用了materi-ui框架，基于React。...不想吐槽，一开始我还以为是Flexbox Grid设计不科学。 准备工作 首先下载BootStrap V4。 Bootstrap V4 目前最新版还是alpha版本，如链接失效，请移步官网。...gulp 开始抽取 下载之后打开Bootstrap源代码文件夹，找到scss目录，可以看到如下的结构，在这里我用IDE打开更直观。 mixins是一些可调用的组件，本身编译不会产生任何结果。...编译代码 官方用的是grunt自动化工具，然而我用着并不习惯。在这里我们用到gulp来编译。
摩登时代 在 Node.js 出现以前，以往的前端开发工作属于石器时代。而随着前端技术的大爆炸来临，我们需要赶上这一次潮流，加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。...$ npm init 导入包 这个我构建好的json文件，将devDependencies下的所有节点复制过去。...如果能看懂这个任务其他也都ok了。 gulp.task 'styles', -> return sass('....监听文件，当发生改动时调用相应的任务 build用于构建编译文件 default默认任务，使用gulp命令执行的任务 browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼 rebuild...当资源文件更新时让browser-sync重新加载变更 完成这些之后，可以使用gulp + 任务名称执行相应的任务 结束语 这是我的前端工作流，构建静态页面速度是不是一下子就提升了呢。
这个文件应该存放在你的项目根目录下。 到目前为止，一切看起来都和 Grunt 没什么区别，那么为什么要介绍 Gulp 呢？接下来就是它的优势所在了。...---- 转到 Gulp.js 在我开始使用 Grunt 之前的几年里，一直是使用 涛哥 开发的 CssGaga 来做前端构建工具。这是当时我们工作标准流程的一部分，它非常强大。...后来从 isux 转岗到 TGideas, 工作流程发生了巨大的变化，同时我在 Windows / Linux / Mac 不同平台下工作的时间也越来越多，于是转向了 Grunt....与 CssGaga 相比， Grunt 需要自己去寻找需要的插件，在每个项目中进行适当的配置来完成构建工作，但是它跨平台、按需组合功能的特性较好地满足了我的需要。...暂时来说，它的插件数量还没有 Grunt 那么多那么全面，不过日常的前端任务，还是都涵盖了，而且有一些实现得比 Grunt 平台上的更棒。
再运行的时候, 会自动读取 gulpfile.js 文件里面的配置 + 按照你再 gulpfile.js 文件里面的配置进行打包工作 + 注意: **直接写在项目根目录, 和 src 同级**...+ 同级目录下, 再次新建一个叫做 pages 的文件夹 => 不行 ? 不能创建同名文件夹 + 同级目录下, 创建一个叫做 views 的文件 => 不行 ?...-> 很容易报错, 基本下载不成功 -> 为什么: 因为 gulp-sass 依赖另一个第三方, node-sass => node-sass 很难下载成功 => 以前都是再一个地方下载...=> 下载 node-sass 从这个单独的地址下载, 下载其他的东西还是统一地址 -> node-sass 单独下载地址 => $ set SASS_BINARY_SITE...css 和 js -> 也可以不包含 => 当我压缩 html 的时候 -> 能再固定位置把我写好的 html 片段引入进来 + 组件 => 一段可以包含(
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。 同样的，也是包括基本用法和各插件的使用。...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...; }); 解释一下，其实就是 将sass文件编译成css，以流的形式pipe结果，再加css前缀，修改后缀为.min.css，并作资源压缩，最后成功后返回done的消息 命令行键入
第一天做项目需求的时候，就遇到了一件让我瞠目结舌的事情：这里的Sass 编译一次居然要10s 以上。...让我更加惊讶的是当时的项目组相关同事已经用了这套工作流快一年了，却居然能一直默默忍受这种编译速度。...后面的故事倒有些题外话了，简单概括是我在接下来的半年发挥了一些“主观能动性”将整个工作流做了一番优化。其中涉及到的就是本文所言的在Gulp 工作流中Sass 增量编译功能的探索。...初级玩家的玩法 Gulp 工作流中集成Sass 编译一般都是用gulp-sass 这个模块，本质上gulp-sass 调用的是node-sass（C++ 版的Sass）。...b.scss，接下来的pipe 中只有 b.scss 去编译而a.scss 不会。
一、css预处理方案 这块没什么好说的，由于本人只对sass比较熟悉，就引入了sass和compass。以及引入了gulp构建工具作为整体构建流程的控制。 二、前端工程化与按需加载 1....前端打包工具 前端打包工具的选择上，最终我选择了rollup，而没有选择webpack的原因有如下几点： rollup实现了tree-shaking，他可以根据函数的引用自动最少引入第三方依赖，这点看上去有点牵强...2. assets文件夹 skin(皮肤样式)的sass源码，皮肤的编译是通过gulp任务完成的。 3. build文件夹 提供rollup打包的配置。...gulpfile.js作为gulp构建任务的入口，实现了sass的编译、dev模式任务。 6....其他 lib文件夹存储的为requirejs需要引入的第三方库，这里就包含vue、vue-route、vuex、requirejs、text.js、css.js等。
然后偶然看到一篇《Gulp的目标是取代Grunt》的檄文，看完后俺义无反顾投入了Gulp 的怀抱。在花了一个小时多了解了Gulp 并看明白配置的写法后，那个风平浪静的下午，我久久不能抑制住内心的激动。...JGulp 包含的功能模块（插件） 小标题含义：功能（对应的Gulp 插件） Compass（gulp-compass） 一个Sass 框架，本工作量主要是Compass + Sass，因此熟悉这两者是使用本工作流的基础条件...默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流（如在 watch Sass编译时候恰巧 Sass代码写错了）。使用plumber 模块可以在纠正错误后继续执行任务。...，所以本工作流不涉及CSS 压缩等其他功能模块（因为这些功能Compass 本身已经包含）。...如果需要进一步的个性化，可以编辑gulpfile.js 文件。
并不会将整个项目的搭建流程细致的写出来，而是挑其中我认为在开发过程中存在的一些很重要的点进行详细陈述。...普通小程序开发流程有可能会遇到的坑 列举部分常见的 小程序本身不支持常用的css预编译器,导致样式规范随意散落在各个文件，无法统一进行管理，而现代前端开发中不论是less,sass,stylus 都可以提升...src 为开发目录 dist（开启编译后可见）为预览/上传目录 .gitignore git上传忽略文件 gulpfile.js 编译配置文件 CHANGELOG.md 版本更新日志 README.md...因此，我们在处理的时候也需要注意区分，变量和函数最好有一个独立的文件目录存放，并且在import的时候，对于变量和函数，是必须交给sass处理的，也就是不能注释掉。...有了就可以方便的将几端共用的h5页面集成到小程序内部，为我们减少了可观的工作量。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
