我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1…
Gulp是一个在你开发web时，帮助你完成几个任务的工具。它经常用来进行一些前端任务，比如：
如果你业务比较复杂，需要使用 webpack 做深度定制，那么常见组合是：项目 - webpack，组件 - gulp。
大约是上一年的这个时候，因为项目合并来到了新的项目组中。虽然协作的同岗位同事也是同一个组的，但使用的Gulp 工作流却有些不一样。第一天做项目需求的时候，就遇到了一件让我瞠目结舌的事情：这里的Sass 编译一次居然要10s 以上。 有用过Sass 这类CSS 预处理器都知道10s+ 意味着什么，你每保存一次.scss 文件，都必须等上10s 以上才能看到你所改动的效果。如此一来十分尴尬，因为你直接写原生的CSS 语法比这还快。让我更加惊讶的是当时的项目组相关同事已经用了这套工作流快一年了，却居然能一直默默忍
第一次接触gulp，当参考各方资料翻译下来，感觉还不如自己总结一份来的流畅，所以这篇最后将自己的实践放在开始，将之前的原文与译文放在最后以供参考。
在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且Webapp通常是一个单页面应用(SPA)，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码，这给前端开发的流程和资源组织带来了巨大的挑战。
在 Node.js 出现以前，以往的前端开发工作属于石器时代。而随着前端技术的大爆炸来临，我们需要赶上这一次潮流，加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。
大家都用过组件库，react 流行的组件库有阿里的 ant-design、字节的 semi-design、arco-design 等。
WeApp-Workflow 是Jeff 在开发个人微信小程序“DeveWork极客” 过程中积累总结而来的一个基于Gulp4 的，专门用于开发微信小程序的前端开发工作流。旨在通过自动化的方式解决微信小程序开发过程中写前端代码的痛点。 简介 进行微信小程序开发，必须用官方的“微信web 开发者工具”，但这个工具的编辑器功能跟专业的编辑器比起来就差强人意了。后来发现可以直接用 编辑器写代码 + “微信web 开发者工具”做预览功能 的组合方式进行开发，嗯开发舒适度好了点。 微信小程序自己搞了一套CSS 的轮子
换肤这个功能，不能算是很常见，但是也是有需求的，所以这里提供几种前端的换肤解决方案，供大家参考。
assets 项目资源目录，dev 开发目录，dist 编译输出目录，gulpfile.js 自动化工具 API
全文全部基于原生的小程序开发所阐述，各种第三方框架开发不在此列。并不会将整个项目的搭建流程细致的写出来，而是挑其中我认为在开发过程中存在的一些很重要的点进行详细陈述。
小编说：历史上先后出现了一系列构建工具，它们各有优缺点。由于前端工程师很熟悉JavaScript，Node.js又可以胜任所有构建需求，所以大多数构建工具都是用Node.js开发的。本文就来一一介绍它们。 前端技术发展之快，各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点：源代码无法直接运行，必须通过转换后才可以正常运行。 构建就是做这件事情，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容。 代码转换：将TypeScript编译成JavaScript、将SC
weapp-css-modules 是小程序的简化版 css-modules，比标准 css-modules[1] 代码量更少的优化方案
突然发现在我博客文章中，缺少这一块的记录，那我就补一篇吧。 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 = requ
sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1、去nodejs官网安装nodejs 2、打开命令行，OSX是终端，windows是命令提示符（window + r 输入cmd回车） 3、使用npm（nodejs的包管理器），或选装cnpm执行npm install cnpm -g --registry=https://registry.npm.taobao.org 4、全局安装gulp：(c)npm install gu
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。
Gulp安装流程、使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一、名词介绍： Npm——node包管理工具 一开始我不理解，包管理工具是什么鬼。后来用到的gulp也好，gulp的插件包也好，都是要在npm这个里边弄出来的。 可以理解为，一个硬盘，里边放的各种整理好的、适用于各种功能的且不重复的文件夹（插件），然后我们需要啥，就去里边摘下来。 当然也可以用它来删除插件 rimraf删除gulp的模块插件 1、安装：npm install -g rimraf（全局安装），如果
Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：
前言 《React移动web极致优化》也提到了，构建工具是前端优化的重要一环。而React的推荐构建工具则是Webpack。这篇文章我们就来聊聊如何在Webpack构建的过程中如何针对React的应用
最近在项目内部创建了一个vue组件库，希望通过组件库的形式，统一项目中组件的逻辑和样式，让代码的复用性更强。
在现在的前端开发中，前后分离、模块化、版本控制、文件合并与压缩、mock数据等，是在大前端开发避不开的概念。在开发的时候，以组件的方式分别开发，在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中，这样的模块化方案一直是前端架构师在解决和优化的焦点之一。
CSS拓展语言出现的原因是，CSS自身支持的功能能有限（如不支持变量，条件控制，循环等编程元素），并不满足我们想要的一些功能。而CSS拓展语言支持CSS不支持的特性。
这一节我们将从下面这一段代码开始增加内容，来看一下 gulp 的一些产能常用插件和使用的方式。
由于小程序更新迭代速度很快，而且我们的技术栈是 react 全家桶，所以在对比 wepy 和 mpvue 之后，我们选择了直接使用原生小程序。对比图如下：
大概两年前，CSS Preprocessor其实没有这么热，而了解sass，less，stylus的人也还没那么多（当时三者占比less还是拥有绝对优势的），但很多时候就是那么duang的一下，然后改变就发生了，就如html5&css3，仿佛一夜之间就遍地开花。当然这其中质变肯定是有道理值得去说道说道的。下面我们一起来对比下css和CSS Preprocessor（以sass为例），了解下其中的优劣。
这里建议先复习一下《再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6》
三、项目环境搭建 3.1.创建项目环境和安装包 创建django项目 mkvirtualenv DjangoProject workon DjangoProject pip install -i https://pypi.douban.com/simple django==2.0.2 进front目录 npm init #初始化一个package.json配置文件文件 在package.json文件中添加要安装的包 "devDependencies": { "browser-sync":
描述：给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
本文作者：IMWeb 林鑫 原文出处：IMWeb社区 未经同意，禁止转载 本文主要展示的是gulp常用插件的使用方法和用途，通过对插件的熟练运用达到精通gulp。不定期更新。可以到gith
由于业务需要，近期团队要搞一套自己的UI组件库，框架方面还是Vue。而业界已经有比较成熟的一些UI库了，比如ElementUI、AntDesign、Vant等。
Webpack不认识CSS（无法直接处理），就需要先由Loader加工一遍（预处理）
所谓前段工程自动化就是：由于前端分裂，有人写css代码，有人写scss，有人写es5，有人写es6，那么就需要翻译工具（命令行工具）翻译成ie或其他所有浏览器能运行的代码版本。
根据文章内容总结的摘要
一、简介 1、什么是webpack webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。 你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期
Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ 写作背景： 现在其实做的不错的开源 UI 库有很多，我还没有真正的实践过多造一个轮子也没太大必要，但是学习编写的思路和过程还是很有必要的，正好看到慕课的一个视频就顺便总结一下组件库开发的流程，顺便熟悉一个打包的配置和流程。 搭建基础结构： 使用VueCli创建默认模板： 创建名为it200-ui的项目：vue create it200-ui； 使用默认Vue2模板即可，我们只考虑搭建UI库的思路不考虑
而且我也提到了目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。
在项目路径下使用 npm init初始化之后，将下面需要安装的依赖复制到package.json文件中
随着前端的不断发展与壮大，前端变得越来越复杂，组件化、模块化、工程化、自动化成了前端发展中不可或缺的一部分，具体到前端工程化，面临的问题是如何提高编码->测试->维护阶段的生产效率。
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
写在前面的话 阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的大门。 //一个常见的Webpack配置文件var webpack = require('webp
前阵子为了满足工作上的一个需求开发了一个PostCSS 插件，后来也将这个插件提交给PostCSS 官方并得到认可。在这篇文章中笔者将记录开发过程中遇到的一些问题，且斗胆将之称为“最佳实践”，希望对有兴趣尝试PostCSS 插件开发的您有所帮助。 简介篇 开发成果展示 首先先上成果：https://github.com/Jeff2Ma/postcss-lazyimagecss （欢迎给个star 哦~） postcss-lazyimagecss 插件实现的功能是为 CSS 中的background-imag
把你的注意力从方法和技术的洪流中移开一会，你就可能会错过什么！ 上周我遇到我的一个前端开发朋友，他很兴奋地跟我谈论他使用的一些新工具。其中最有意思的是使用 Grunt 来编译 SCSS。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
