Gulp安装流程、使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一、名词介绍： Npm——node包管理工具 一开始我不理解，包管理工具是什么鬼。...PS：未能出现版本号，请尝试注销电脑重试； npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器， 最后出现版本号就是装上了。 ? ...3．cnpm 为什么要安装cnpm？据说npm的服务器在国外，如果我们在国内从npm上下载文件会反应慢，而且可能会异常报错。。装上这个东东就快了。。。...**其实，镜像只要装到局部（本地目录）就好了，毕竟全局我们只装一个gulp， 但是在本地目录中却要装好多个用到的gulp插件，如果没有镜像，要等半天也是不开心的。 ...或者（ gulp taskName） 直接调用gulp或者输入gulp+任务名称 比如在上边的gulpfile.js里边，我想调用sass任务，就直接在命令行输入gulp sass 如果我想调用所有的
我的学习代码https://github.com/klren0312/gulp_begin 如果觉得npm很慢可以使用cnpm。 Gulp是一个在你开发web时，帮助你完成几个任务的工具。...如果你足够疯狂，你甚至可以使用Gulp创造一个静态页面生成器（我已经做到了！）。所以，Gulp是非常强大的，但是如果你想创建你自己的构建流程，你就要去学习如何使用Gulp。...所以这就是这篇文章所要做的。它将帮助你入门Gulp，你就可以自己探索其他任何东西。 在我们投入Gulp的学习之前，让我们来讨论一下，为什么你可能希望使用Gulp，而不是其他相似的工具。...npm install命令，使用Node Package Manager（npm）来安装Gulp。 -g标志代表这个安装时全局安装到你的电脑上，这就运行你在电脑的任何地方都能使用gulp。...watchers }) 我们也希望确定sass在watch之前运行，所以CSS将在我们运行Gulp命令时，是最新的。
大约是上一年的这个时候，因为项目合并来到了新的项目组中。虽然协作的同岗位同事也是同一个组的，但使用的Gulp 工作流却有些不一样。...第一天做项目需求的时候，就遇到了一件让我瞠目结舌的事情：这里的Sass 编译一次居然要10s 以上。...后面的故事倒有些题外话了，简单概括是我在接下来的半年发挥了一些“主观能动性”将整个工作流做了一番优化。其中涉及到的就是本文所言的在Gulp 工作流中Sass 增量编译功能的探索。...上面这种粗暴的增量更新机制并没有考虑到Sass 中存在的依赖关系。...而对应的Gulp 插件也有不少，不过本人使用的是在前人的基础上二次开发的 gulp-better-sass-inheritance。
准备使用 准备使用 gulp + 作用: 帮我们打包自己的项目 1....再项目里面再次安装 gulp + 注意: **项目里面的 gulp 是以第三方模块的形式出现的** + 专门给你提供配置打包流程的 API 的 + 每一个项目都要安装一次 + 打开命令行...项目依赖第三方 gulp + 每一个项目都要安装一次 + 作为第三方包出现, 在你导入以后, 可以使用 gulp.xxx() 方法 + 切换到项目目录, 输入指令 $ npm install...=> 直接再管道函数里面使用, 需要传递参数 -> { browsers: [要兼容的浏览器] } 3. gulp-sass => 下载: npm i gulp-sass -D...-> 很容易报错, 基本下载不成功 -> 为什么: 因为 gulp-sass 依赖另一个第三方, node-sass => node-sass 很难下载成功 => 以前都是再一个地方下载
至于为什么在全局安装gulp后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow上有人做出的回答：why-do-we-need-to-install-gulp-globally-and-locally...文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为...当我们没有在gulp.src()方法中配置base属性时，base的默认值为通配符开始出现之前那部分路径，例如： gulp.src('app/src/**/*.css') //此时base的值为 app...", "gulp-ruby-sass": "~0.4.3", "gulp-load-plugins": "~0.5.1" } } 然后我们可以在gulpfile.js中使用gulp-load-plugins...用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。
安装nodejs 没有的node的话，从这下载 Node.js，若已经有了可跳过这一步。 最好能保证你的node与npm/cnpm处于最新的状态，以免安装某些最新版本的gulp插件时因此报错。...详情：package.json文件 2.项目安装gulp以及gulp插件 进入到package.json所在的项目的根目录，在没有其他说明情况下，以下实例基于toptal-gulp-tutorial/step1...它使用一个名为 gulp-sass插件，这个插件基于libsass。我在这里选择使用libsass， 因为它比Ruby的替代方法更快，尽管它缺少一些功能。...使用Watcher 我创建了一个可以直接使用的watcher入门工具包。...您将可以在命令行中看到Gulp的通知。 代码演练 我们已经为我们的任务设置了一个watcher，而且只有3个额外的代码行。也就是说这个watcher入门工具包与之前的引导例子没有特别大的差异。
cobish 抠着鼻屎对我说，你去看我的笔记就好啦！好吧，看完后，笔者又整理了一篇关于我们在项目中，使用 glup 的前端文章分享给大家。...基于 gulp 的前端构建 之前使用 Grunt 时总结了一篇「基于 Grunt 的前端构建」。...在使用了 Grunt 的一段时间后，我发现了 gulp 的运行速度比 Grunt 快很多，于是便从 Grunt 转移阵地到了 gulp。以下的构建思路跟 Grunt 的构建很类似。...如果你也使用过 Grunt，那我相信你一定能够很快地切换到 gulp。当然如果你没有接触过 Grunt，我相信你一定也能够很快上手 gulp。...当然在同时开上多个浏览器测试页面时它将会很有帮助。
说一下我为什么要提取Flexbox。有需求才有动力，首先是需求，最近在开发一个移动端适配的网站，使用了materi-ui框架，基于React。...使用materi-ui时，已经内置了许多样式，但是bootstrap的一些多余样式会影响一些现有样式，而那些样式对我又没啥用。另外Flex对于移动端布局开发非常适合，这次正好也拿来练练手。...BootStrap原本最常用的布局栅格化系统在做响应式开发的时候比较方便，但是只针对于移动端开发的时候并没有多大用处了，流行的Flex布局应用越来越广泛。...gulp 开始抽取 下载之后打开Bootstrap源代码文件夹，找到scss目录，可以看到如下的结构，在这里我用IDE打开更直观。 mixins是一些可调用的组件，本身编译不会产生任何结果。...在源代码中我们可以发现已经有了一个bootstrap-flex.scss的文件，然而这里面发现直接引入了bootstrap的所有代码，这并不是我们想要的，它可能会复写一些基本样式，会影响我们的工程。
摩登时代 在 Node.js 出现以前，以往的前端开发工作属于石器时代。而随着前端技术的大爆炸来临，我们需要赶上这一次潮流，加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。...下面是我对gulp任务，使用CoffeeScript，然后我会讲解一个任务。...有一点需要注意的地方，gulp-ruby-sass需要有ruby语言环境，这是安装传送门Ruby，一般Mac会自带Ruby。...监听文件，当发生改动时调用相应的任务 build用于构建编译文件 default默认任务，使用gulp命令执行的任务 browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼 rebuild...当资源文件更新时让browser-sync重新加载变更 完成这些之后，可以使用gulp + 任务名称执行相应的任务 结束语 这是我的前端工作流，构建静态页面速度是不是一下子就提升了呢。
模块化开发 所谓的前端模块化开发，我的理解就是，在开发的时候，把不通的资源文件按照他的具体用途进行分类管理，在使用的时候利用CommonJS、AMD、CMD等规范将这些资源文件引入到当前文件中。.../style/app.scss'; 你当时可能产生疑问，为什么在js文件中引入scss文件呢？...在Gulp中启动本地服务有一个很方便的配置，就是``livereload:true``属性的设置，设置后浏览器会根据你项目中资源的变化自动刷新浏览器（如果你的chrome浏览器设置该属性后在你修改文件并保存时仍没有自动刷新...但是，这个功能是需要结合上一小节中的``gulp.watch()``实时监控文件变化，然后执行合并压缩和sass/less编译等操作后，浏览器再刷新时才能保证是我们修改后的内容。...理论上好像是这样，但是实现好像有不少限制，比如，HTML文件的自动刷新问题（html-webpack-plugin插件使用老是报错），当本地server启动在非output.path路径之外时则不能自动刷新等问题
静态页面的模块化、组件化 为什么重构也要模块化、组件化： 模块强调分离，对重构而言，我们不能每次只写自己的HTML做好自己的事，重构是提供整张页面给前端或者后端，在庞大且复杂的项目中后续在开发页面时，每增加一个模块都需要和对接人员沟通清楚...，可能还得指出具体位置； 组件强调复用，在重构新的页面时，对公共组件部分还得进行再重构，增加了重构的开发时间； 实现方式： HTML：Gulp-content-includer 将静态HTML进行模块化开发...为什么要搭建管理后台？ 刚开始在项目初期的时候，我们在每次联调或者重构完页面时，都需要通过前端或者开发进行协助将CSS及图片上传到对应环境中，最后因为实在太麻烦，重构也开始使用跳板机进行环境的上传。...CSS 为什么不将CSS合并与压缩功能做在gulp中，却做到管理端上？...如果做到gulp中，会不方便后期的改版维护，在发布时，因为都是压缩过的CSS代码，不便和线上进行对比。虽然有SVN，但是为了保证一切以线上为主的基础，还是会对线上的代码进行对比。
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。 同样的，也是包括基本用法和各插件的使用。...一、环境配置 gulp是基于nodejs的，所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般，也是需要...二、基本用法--插件使用 gulp所支持的插件也是很多的，使用方式跟基本的nodejs差不多。...下面统一介绍几个常见的 插件，更详细用法可以到对应官方站点查看API sass的编译（gulp-ruby-sass） 自动添加css前缀（gulp-autoprefixer） 压缩css（gulp-minify-css.../js', 'dist/assets/img'], cb) }); 当然，gulp任务的执行是异步的，也就是说，任务之间的执行没有先后之分，若想保证执行顺序 只好定义依赖关系（如上述参数二的依赖） 或者使用
迁移前提 如果你打算把 Sass 迁移到 PostCSS，那么在迁移之前有些事是必须要考虑的： 首先，先问下自己为什么要迁移？值不值这么做很重要。...其次，你对 PostCSS 的插件机制一定要深入了解，因为整个迁移过程肯定会出现问题。 然后如果决定迁移，先调查下自己或团队的 Sass 使用习惯，然后对比 PostCSS 的实现。...迁移步骤 1、确定使用什么构建 webpack：postcss-loader(推荐使用) gulp：gulp-postcss 2、挑选 PostCSS 插件 首先统计常用 Sass 功能，查找对应的 PostCSS...挑选未来语法的插件： postcss-preset-env (cssnext已经不再维护了，所以不推荐) 以下是我挑选的一些插件，挑选的原则是：优先 CSS 新标准，兼容 Sass 语法，插件之间不冲突...如果你的目的是平稳过度，且以后使用未来标准语法，那么对于一些基础的变量得使用新的标准语法重新定义一份。 下面是一些我迁移过程中遇到的部分不支持问题： ?
Round1：安装 node-sass 刚进入前端领域的朋友，可能都问过这么一个问题：为什么我的 node-sass安装失败了？...在网上搜索这个问题，你会找到答案，其中一个是使用 cnpm，但我用过感觉怪怪的，最早是使用 Angular4 时，执行ng eject发生了很多错误。...即便我已经是在 Docker 容器里执行 build 任务了，也就是说没有上面那个和 Node 版本不兼容的问题，但还是遇到了一次又一次的报错，这谁能顶得住呢？ ?...前者说的 Dart VM 就是现在很火的 Flutter 选择的编程语言 Dart 的虚拟机；而后者的出现是为了能快速与 Node 环境下现有的工作流集成，比如 webpack，gulp等。...改用 Dart Sass 后，不管是安装还是兼容高版本 Node 这块，都没有什么问题，总的来说，使用体验还是非常棒！
你爱它，因为它赋能了 CSS 工程化；你恨它，因为有时候你搞不懂它为什么又出差错了。我最近就在生产环境新踩了两次 node-sass 的坑，这让我下定决心放弃 node-sass。...Round1：安装 node-sass 刚进入前端领域的朋友，可能都问过这么一个问题：为什么我的 node-sass安装失败了？...即便我已经是在 Docker 容器里执行 build 任务了，也就是说没有上面那个和 Node 版本不兼容的问题，但还是遇到了一次又一次的报错，这谁能顶得住呢？ ?...前者说的 Dart VM 就是现在很火的 Flutter 选择的编程语言 Dart 的虚拟机；而后者的出现是为了能快速与 Node 环境下现有的工作流集成，比如 webpack，gulp等。...改用 Dart Sass 后，不管是安装还是兼容高版本 Node 这块，都没有什么问题，总的来说，使用体验还是非常棒！
CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。...添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。...自动化构建工具 自动化构建工具：webpack、gulp、grunt都可以实现css3属性前缀的自动化添加。在此我只演示一下gulp的应用。...$ npm init -y # 初始化项目的npm配置文件 $ npm i -S gulp # 安装gulp到本地项目（仅开发时使用，S大写） $ npm i -S gulp-autoprefixer...，这里没有进行压缩，如果需要压缩可以添加gulp的压缩插件。
CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。...添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。...自动化构建工具 自动化构建工具：webpack、gulp、grunt都可以实现css3属性前缀的自动化添加。在此我只演示一下gulp的应用。...gulp 在线文档：地址 5. sass、less等预处理语言 sass和less等css的预处理语言配合响应的编译工具也可以实现对css3中的新属性的自动化加前缀处理。...比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
突然发现在我博客文章中，缺少这一块的记录，那我就补一篇吧。...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')...47 gulp.task('default', ['watch', 'pug' ]); 没有热更新和浏览器自动刷新功能，只是适用于编译sass和pug，并且有持续监听、不断开gulp的功能、还有pug...声明： 请尊重博客园原创精神，转载或使用图片请注明： 博主：xing.org1^ 出处：http://www.cnblogs.com/padding1015/
后来有了Github 做版本控制，后来用了Compass 写Sass 貌似快了些。不过不过，依然在完成一次项目后累成狗的同时祈祷键盘F5键没有坏掉。...然后偶然看到一篇《Gulp的目标是取代Grunt》的檄文，看完后俺义无反顾投入了Gulp 的怀抱。在花了一个小时多了解了Gulp 并看明白配置的写法后，那个风平浪静的下午，我久久不能抑制住内心的激动。...JGulp 包含的功能模块（插件） 小标题含义：功能（对应的Gulp 插件） Compass（gulp-compass） 一个Sass 框架，本工作量主要是Compass + Sass，因此熟悉这两者是使用本工作流的基础条件...文件清理功能（gulp-clean） 在项目完成可以删除一些多余的文件 任务错误中断自动重传（gulp-plumber） 好吧，“任务错误中断自动重传”是我瞎命名的。...默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流（如在 watch Sass编译时候恰巧 Sass代码写错了）。使用plumber 模块可以在纠正错误后继续执行任务。
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ 写作背景： 现在其实做的不错的开源 UI 库有很多，我还没有真正的实践过多造一个轮子也没太大必要.../components/lib/demo/index.vue"; Vue.component("name", Demo); 创建组件安装脚本： 通常在使用开源 UI 库时并没有使用 component...需要用到的模块如下： gulp-sass，因版本问题需要额外导入 sass 模块。 gulp-minify-css：主要用来对 css 文件进行压缩。...const gulp = require("gulp"); const sass = require("gulp-sass")(require("sass")); const minifyCSS = require...vuepress 没有成功的配置，在开发组件库的过程中使用到的技术栈可以是五花八门但是通过本次总结到的我们开发组件库的生命周期大致统一应该是搭建结构、设计组件、编写组件、验证组件、打包构建、发布为主线
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
