升级到 VS2015 之后， TypeScript 文件不能自动编译成 js 文件， 要编译项目才能讲所有的 ts 文件 编译成 js 文件， 不过 VS2015 支持 Gulp ， 而 Gulp 有 TypeScript 插件， 这样使用 Gulp 自动编译 ts 文件的方法就可以实现了。
之前项目中使用的webpack进行前端代码的编译，但一直不太喜欢webpack的那种玩法。使用webpack编写编译脚本时就是按webpack的规则进行各种配置，必须完全遵守它的条条框框，明明是自己写nodejs代码进行编译，但完全可控感。之前就听说过gulp+browserify的组合，这次就尝试使用这个东东重写编译脚本。话不多说，直接上最后的成果。 前端依赖package.json package.json { "name": "ssm-scaffold-frontend", "version"
在前端开发中通常需要做，预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作，而使用Gulp可以自动化的完成这些工作，从而提高网站的开发效率，在我的博客使用Less中介绍了将Less文件编译成CSS文件的方法，仔细观察可以看到如果按照博客中介绍的方法，在编译多个Less文件或者编译不同文件夹下的Less文件时需要执行多次Less文件编译命令，而使用Gulp可以一次性完成这些操作
在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且Webapp通常是一个单页面应用(SPA)，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码，这给前端开发的流程和资源组织带来了巨大的挑战。
上述代码会将src/test里面的所有js文件合并，压缩成一个文件并保存到./bunld/js/bundle.min.js 运行命令
gulp 是基于流（stream）的自动化构建工具，能帮助前端节省很多资源。 OK，直接进入主题——本篇中将主要介绍怎么用gulp。
gulp 是一个构建工具，基于Node.js的平台运行，使用的是commonJs的模块化语法。 我们使用gulp需要用到的包 一个TASK任务，对应一个包，对应一个处理逻辑、 gulp.series对应的是同步任务，从左到右，依次执行任务。时间长 gulp.parallel对应的是异步任务，效率高，时间短。 gulp.src 表明文件从哪里读取 gulp.dest 表明文件输出到哪 const gulp = require('gulp'); //gulp的包 const eslint = req
/** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */
1.gulp介绍 基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。使用gulp能完成以下任务： 压缩html、css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程： 开发->分析->测试->编译->发布部署 一段简单的基于gulp的项目构建代码，gulpfile.js内容如下所示: gulp.task('default',function(){ return gulp .src(
对现代开发者而言，即使是构建一个很简单的web应用，也要编写很多任务，比如压缩图片、最小化CSS和JavaScript文件、移除调试代码、运行单元测试以及处理很多其它不计其数的任务。当你将绝大部分精力放在业务主流程上，却还需要时刻盯着这些碎片化任务着实有点让人焦头烂额。 Laravel的宗旨是让PHP开发变得轻松愉悦，所以从Laravel 5开始，提供了一个新的被称作LaravelElixir的API。该API集成了Gulp，为编译Laravel项目中的Less、Sass、CoffeeScript以及处理许
Gulp 是基于定义的每个任务或任务组合来完成的一款构建工具，任务函数的编写一定的由于配置的体验，另外它基于 node 中强大的流的能力，可在内存中集中处理后再存入磁盘，加速构建。
关于 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
[JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理
这一节我们将从下面这一段代码开始增加内容，来看一下 gulp 的一些产能常用插件和使用的方式。
Gulp是一个在你开发web时，帮助你完成几个任务的工具。它经常用来进行一些前端任务，比如：
虽然 webpack 用的比较多，不过在小程序这种场景下，简单的 gulp 也是个不错的选择~
由于本文重点是介绍gulp4.0搭建脚手架的思路，相关插件的用法以及项目结构的设计，由于gulp的基本用法很简单，如果不熟悉可以移步官网自行研究学习。该脚手架的设计思路和功能如下：
我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1…
一直以来，我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的，就像下面这样：
安装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是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
前端开发的工作往往需要把LESS/SASS编译成CSS文件，对多个JS、CSS文件进行合并与压缩处理，对JS、CSS进行语法的检查等，上面提到的这些都是一些重复性的操作，在开发过程中占据了大量的时间，降低了开发效率。对于大量重复性的操作是不是可以交给工具来处理，我们只需要告诉工具需要处理哪些操作。那么今天要给大家介绍的工具是Gulp。 本文内容概要： 1 什么是Gulp 2 Gulp VS Grunt 3 Gulp的安装与使用 4 命令行的简单介绍 1 什么是Gulp Gulp是一个前端自动化构建工具，在项
前不久，处理生信分析的网页版自动化报告时候就使用过 fancybox，今天在优化个人博客，为博文增加图片缩放效果，解决一些滚动条问题时，才从 fancybox 的 Github 源码中接触到 gulp —— 一个基于流的前端自动化构建工具，本文是学习的一些记录。
一直以来，我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的，就像下面这样： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
Angular2 已经发布 beta9 ， 是时候折腾一下了。 Angular2 和 AngularJS 1.x 相比， 可以说是全新的框架， 除了名字有延续性之外， 能延续的真的不多。
前不久，处理生信分析网页版自动化报告的时候就使用过 fancybox，今天在优化个人博客，为博文增加图片缩放效果，解决一些滚动条问题时，才从 fancybox 的 Github 源码中接触到 gulp —— 一个基于流的前端自动化构建工具，记录一下学习的过程。
gulp 是一个前端构建工具，它能通过自动执行常见任务，比如编译预处理 CSS ，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程，从而使开发更加快速高效。
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/53047467
本文需要安装node（自行安装），并了解过gulp入门。gulp脚本下载：https://github.com/youhunwl/gulp 欢迎star。
对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。
本文作者：IMWeb 林鑫 原文出处：IMWeb社区 未经同意，禁止转载 本文主要展示的是gulp常用插件的使用方法和用途，通过对插件的熟练运用达到精通gulp。不定期更新。可以到gith
ambari-web可以单独编译，用来修改ambari UI页面。采用ember.js（版本： v1.0.pre）作为前端MVC框架和NodeJS相关工具，用handlebars.js作为页面渲染引擎，在CSS/HTML方面还用了Bootstrap（v2.1.1）框架。
assets 项目资源目录，dev 开发目录，dist 编译输出目录，gulpfile.js 自动化工具 API
在 Node.js 出现以前，以往的前端开发工作属于石器时代。而随着前端技术的大爆炸来临，我们需要赶上这一次潮流，加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。
描述：给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
weapp-css-modules 是小程序的简化版 css-modules，比标准 css-modules[1] 代码量更少的优化方案
JS的新版本 ES6/ECMAScript2015 在去年出来了，我们现在普遍使用的ES5是在2009年出来的，相隔这么多年，变化比较大，添加了一些很好用的特性 下面就看几个简单而实用的小特性 特性示例 1模板文本 需要在字符串中加入变量时，通常做法就是使用字符串拼接，如 var param = 'b'; var str = 'a ' + param + ' c'; ES6中简单了，可以直接在字符串中添加变量 var str = `a ${param} c`; 注意，使用的是反引号 ``，而不
这里建议先复习一下《再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6》
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。
如果你已经在项目中引入了gulp，那么不妨尝试用一些gulp集成好的插件来做一些任务。下面假定前端项目中根目录有src以及dist两个，分别用于开发和生产。 * 以下模块地址均为官网地址，如果觉得请求地址慢，可以访问淘宝镜像的包说明地址，http://npm.taobao.org/ * 以下模块介绍顺序不分先后，代码仅供参考，亲测可用。 * 所有的模块使用都需要require引入，如果下面代码有遗漏请自觉加入。
webpack简介 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 webpack特点 Webpack 有两种组织模块依赖的方
第一次接触gulp，当参考各方资料翻译下来，感觉还不如自己总结一份来的流畅，所以这篇最后将自己的实践放在开始，将之前的原文与译文放在最后以供参考。
webpack简介 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 webpack特点 Webpack 有两种组织模块
gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十KB，效果远远不如imagine、tinypng等压缩方式，所以此处不再写使用gulp压缩图片的内容）。
Grunt和Gulp是Javascript世界里的用来做自动压缩、Typescript编译、代码质量lint工具、css预处理器的构建工具，它帮助开发者处理客户端开发中的一些烦操重复性的工作。Grunt和Gulp都在Visual studio 2015中得到支持。ASP.NET 项目模板默认使用Gulp。 Grunt和Gulp Grunt和Gulp有什么区别？Gulp虽然是稍微晚一点登场的，但是它因crisp performance和优雅的语法受到欢迎。与Grunt不同，Grunt往往在硬盘上是读写文件，G
其实之前都不打包的，就是 js、css 分别用对应的工具编译下，然后在 html 里引入。
它不是JS文件，也不是JS框架，而是Server side JavaScript runtime，当服务端的一个JS文件运行时，会被NODE拦截，在NODE中运行JS代码。JS由ES（ECMAScript），DOM，BOM 组成，目前运行在浏览器内核中，NODE中只能运行ECMAScript，无法使用DOM，BOM。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
