前言: gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。相比于grunt的频繁 IO 操作，gulp的流操作，能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程，使用还是非常简易的。初步入门资料可参考这里。所以战略上一定要藐视”她”;当然战术上要
网站开发正变得越来越专业，涉及到各种各样的工具和流程，迫切需要构建自动化。 所谓"构建自动化"，就是指使用构建工具，自动实现"从源码到网页"的开发流程。这有利于提高开发效率、改善代码质量。 本文介绍如
最近做了一些总结，之前都是迷迷糊糊，搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。
1、Auto Rename Tag 修改 html 标签，自动帮你完成尾部闭合标签的同步修改，和 webstorm 一样。
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。
一、运行环境 1. Node.js 2. Chrome 3. 其它浏览器 二、开发工具 1. WebStorm 1.1 功能特性 1.2 小技巧 1.3 实用快捷键 1.4 插件支持 2. Sublime Text 2.1 功能特性 2.2 小技巧 2.3 实用快捷键 2.4 插件支持 3. HBuilder 3.1 功能特性 3.2 小技巧 3.3 实用快捷键 3.4 插件支持 4. 开发工具小结 三、构建工具 1. Grunt 1.1 Grunt安装 1.2 Grunt配置文件 1.3 Gru
写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。
打开命令行, 输入指令=> $ sudo npm install --global
浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境
报错内容： TypeError: gulp.on(...).on(...).on(...).on(...)\.start is not a function 问题分析：一般这种情况是因为gulp版本引起的。
翻译｜chechengpeng 原文 | https://www.sitepoint.com/anatomy-of-a-modern-javascript-application/ 译文 | http
作者：龙付成--腾讯高级前端工程师 @IMWeb前端社区 目录 JavaScript早期主要作为脚本语言运行在浏览器，而现在JavaScript的使用范围已经超越浏览器，向通用系统语言发展。特别是HTML5的出现，浏览器的平台化，Node.js开源项目的发展，NoSQL技术的发展，JavaScript逐渐成为跨移动平台应用程序及跨平台桌面应用程序的开发语言。 JavaScript标准有两类，一种是作为浏览器上通用行业标准的ECMAScript标准，另一种是作为浏览器外的桌面、服务器的标准CommonJS标
一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块不会影响其他功能的运行。
gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十KB，效果远远不如imagine、tinypng等压缩方式，所以此处不再写使用gulp压缩图片的内容）。
你有两年以上的前端开发经验吗？你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗？你的 JavaScript 知识是否融汇贯通，你是否喜欢使用 Gulp ， npm 和 jQue
在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。 在以前的项目中，我们选择 JSHint 和 JSCS 结合使用，WebStorm 等开发环境已经支持这些工具，使用起来很顺手。然而，最近使用 React JSX 语法时，却遇到了问题：JSHint 不支持 JSX 语法。虽然有 JSXHint 这样的 JSHint 衍生工具，但个人并不喜欢这样的实现方式：不是以插件的形式实现，而是重新重新包装了一个工具
「由于链接无法跳转，请点击阅读原文查看详情喔，记得给bruce-cli一个Star」
全文全部基于原生的小程序开发所阐述，各种第三方框架开发不在此列。并不会将整个项目的搭建流程细致的写出来，而是挑其中我认为在开发过程中存在的一些很重要的点进行详细陈述。
首先安装符合要求的node和npm版本，安装yarn（建议通过msi文件全局安装）
你有两年以上的前端开发经验吗？你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗？你的 JavaScript 知识是否融汇贯通，你是否喜欢使用 Gulp ， npm 和 jQuery ？如果是这样，根据 Ashley Nolan 的前端问卷调查，你是一个典型的前端开发工程师。 谎言，该死的谎言，统计数字和调查问卷 愚人码头注：谎言，该死的谎言，统计数字（英文：Lies, damned lies, and statistics），是一句著名的西方谚语。主要描述数字的说服能力，特别是用来讽
译者 | 愚人码头 链接 | http://www.css88.com/archives/7175 简介 你有两年以上的前端开发经验吗？你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗？你的 JavaScript 知识是否融汇贯通，你是否喜欢使用 Gulp ， npm 和 jQuery ？如果是这样，根据 Ashley Nolan 的前端问卷调查，你是一个典型的前端开发工程师。 谎言，该死的谎言，统计数字和调查问卷 作者注：谎言，该死的谎言，统计数字（英文：Lies, damned
gulp 是一个构建工具，基于Node.js的平台运行，使用的是commonJs的模块化语法。 我们使用gulp需要用到的包 一个TASK任务，对应一个包，对应一个处理逻辑、 gulp.series对应的是同步任务，从左到右，依次执行任务。时间长 gulp.parallel对应的是异步任务，效率高，时间短。 gulp.src 表明文件从哪里读取 gulp.dest 表明文件输出到哪 const gulp = require('gulp'); //gulp的包 const eslint = req
gulp 是一个前端构建工具，它能通过自动执行常见任务，比如编译预处理 CSS ，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程，从而使开发更加快速高效。
在该项目路径下，我们独立安装gulp：npm install gulp 。此时会生成一个 node_modules 文件夹和一个 package-lock.json 文件，如下图：
Tips:前导必备 博主博客地址 博主使用的是yilia主题 ---- 1、全局安装gulp npm install gulp -g # 查看版本 gulp -v 2、安装gulp插件 在站点根目录下安装 npm install gulp --save npm install gulp-minify-css --save npm install gulp-uglify --save npm install gulp-htmlmin --save npm install gulp-htmlclean -
什么是 gulp 简单的讲，gulp 是一个构建工具，一个基于流的构建工具，一个 nodejs 写的构建工具，使用 gulp 的目的就是为了自动化构建，提高程序员工作效率😂。 入门指南 全局安装 gulp： $ npm install --global gulp 作为项目的开发依赖（devDependencies）安装： $ npm install --save-dev gulp 在项目根目录下创建一个名为 gulpfile.js 的文件： var gulp = require('gulp'); // 默认
图片 本篇博文的内容根据 Introduction to Gulp.js 系列文章 拓展而来，其代码、依赖包及目录结构部分均有所更改，更多详细内容，敬请参考
前端开发的工作往往需要把LESS/SASS编译成CSS文件，对多个JS、CSS文件进行合并与压缩处理，对JS、CSS进行语法的检查等，上面提到的这些都是一些重复性的操作，在开发过程中占据了大量的时间，降低了开发效率。对于大量重复性的操作是不是可以交给工具来处理，我们只需要告诉工具需要处理哪些操作。那么今天要给大家介绍的工具是Gulp。 本文内容概要： 1 什么是Gulp 2 Gulp VS Grunt 3 Gulp的安装与使用 4 命令行的简单介绍 1 什么是Gulp Gulp是一个前端自动化构建工具，在项
由于本文重点是介绍gulp4.0搭建脚手架的思路，相关插件的用法以及项目结构的设计，由于gulp的基本用法很简单，如果不熟悉可以移步官网自行研究学习。该脚手架的设计思路和功能如下：
这两天，在对现有项目进行框架优化，由于项目使用gulp+jQuery构建的，不支持ES6规范，不能很好满足越来越复杂的需求场景，尤其是需要多异步任务的情况下，js又要异步又要操作各种DOM状态，状态与状态间也是各种紧耦合，单纯使用es5和jQuery，已经开始影响开发效率了。
关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个，Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。因此，Gulp 构建 ES6 开发环境的方案有很多，例如：webpack-stream、rollup-stream 、browserify等，本文讲述使用 gulp-better-rollup 的构建过程。gulp-better-rollup 可以将 rollup 更深入地集成到Gulps管道链中。 GitHub地址：https://github.com/JofunLiang/gulp-translation-es6-demo
图来源网络 前端插件以及部分细分网址梳理 插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程
Gulp 是基于定义的每个任务或任务组合来完成的一款构建工具，任务函数的编写一定的由于配置的体验，另外它基于 node 中强大的流的能力，可在内存中集中处理后再存入磁盘，加速构建。
项目需要，在一些场景，用户需要手动编写一些js脚本来实现自己的功能；前期一直用文本框显示，不便于编辑和查看。因此需要引入一个在线代码编辑器。效果如下：
相比于JavaScript开发人员的数量，目前JavaScript框架、类库和工具的数量似乎更多一些。截至2017年5月，GitHub上的快速搜索显示，有超过110万个JavaScript项目。npmjs.org有50万个可用的软件包，每月下载量近100亿次。
eslint初始化后会出现三个项目，根据项目而定 1、使用什么样的eslint？(这里我选择3)
一、HTML、CSS基础、JavaScript语法基础。 二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。 三、ES6语法。这部分属于JS新增的语法， promise、async 等内容要尤其关注。 四、HTML5和CSS3。要熟悉其中的新特性。 五、canvas。加分项。 六、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。 七、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。 八、Node.js。属于加分项。 九、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。 十、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。 十一、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。 十二、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
var s = gulp.src(["fileA","fileB","fileC"])
在软件开发中使用自动化构建工具的好处是显而易见的。通过工具自动化运行大量单调乏味、重复性的任务，比如图像压缩、文件合并、代码压缩、单元测试等等，可以为开发者节约大量的时间，使我们能够专注于真正重要的、有意义的工作，比如设计业务逻辑，编写代码等等。 对很多前端开发人员而言，Grunt 无疑是这方面的首选。基本上，如果你会用 JavaScript ，那么在一个名为 Gruntfile.js （或者 Gruntfile）的文件中用 Javascript 语言定义自动化任务是非常简单的过程，同时大量的 第三方插件
写到最后总结得差不多了，后续如果我想起还有哪些构建依赖遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。# 前端汇总系列：npm依赖(构建编译)
官网： https://aui.github.io/art-template/zh-cn/index.html
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。
前言 gulp 是一个前端项目开发的自动化打包构建工具, 类似的打包工具还有webpack。 前端开发的过程中，会写到 js 文件，css 文件，我们的项目如果想上线，那么一定要体积小一点，就需要对原始的代码进行编译压缩。 环境准备 gulp 是基于node 运行的，使用npm 全局安装 npm install -g gulp 安装gulp依赖包,因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖： npm install gulp --save-dev 安装完成会生成一个package-lock.
使用缘由 前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率 简介：grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查 为什么要使用Grunt？ Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，还可以自己动手创造一个
Gulp是一个在你开发web时，帮助你完成几个任务的工具。它经常用来进行一些前端任务，比如：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
