① 前端工具里面gulp和fis，有哪些优缺点
fis 搭建过程相对繁琐，不过搭建好以后已经集成功能可以更加丰富，例如自带服务器环境等，还有一些网络独有的构建环节插件。
gulp和gruntjs配置和使用类似，主要使用npm仓库已有的插件进行封装，生态系统稳定，相对更开放一些。
我自己也开发了一款前端工具，功能可以看做是弱化的fis，但是也有很多独有的功能，非常适合初中级前端组成团队的使用，还自带了比nginx配置方便的代理配置功能。 你可以网络一下 f2e-server.
② 前端构建工具Gulp.js 你知多少..(webpack/gulp/grunt)
@ TOC
阅读本文章之前，相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了，那么他们之间究竟有什么区别呢？
gulp文档上面有这么一句话 ，也就是说 gulp是一个自动化构建工具；
gulp的一些功能如下(包括但不限于):
其实Webpack和另外两个并没有太多的可比性
傻瓜式起步照搬官网文档
1.安装
2.在项目根目录下创建一个名为 gulpfile.js 的文件：
3.运行 gulp：
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
具体详情可以查看 gulpjs.com文档
新建一个项目gulp-test
环境:
1.新建文件以下文件如下
其中 gulpfile.js 是我们gulp的配置文件，启动gulp默认会找个这个文件并执行；
2.接下来安装依赖
一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)
此时我们的目录结构是这样了
安装依赖
这里页面实时刷新只讲这个 gulp-connect ，其他详情可以参照 Browsersync 和文章 gulp-livereload
安装完依赖后配置gulpfile.js如下:
大概讲解一下gulpfile.js:
gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务（task）
如上我们定义了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任务，其中:
my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下；
my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下；
html 是将 符合所提供的匹配模式的html进行监听，如果有变化则connect.reload()
clean 是如果任务重新启动时 删除旧文件；
default gulp默认启动的任务
watch gulp的api 监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。
server 依赖gulp-connect启动一个服务器
配置完gulpfile.js之后，我们给js和css及html加点东西:
首先js/helloworld.js
css/index.scss
index.html
运行gulp
浏览器效果:
接下来我们修改helloworld.js来看看是否能实时刷新
修改如下:
按保存之后，终端给我们报了一个错:
查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法，有问题解决问题，es6=>es5
解决方案:
安装gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
运行
依然报上面的错；找了一些原因发现，虽然安装了相关依赖，却没有配置.babelrc文件，即babel还没转化es6
根目录添加.babelrc文件
重新运行:
查看dist下的js文件
改变helloworld.js检查页面是否刷新
保存，页面的天空蓝换成你们喜欢的yellow颜色
修改index.scss 查看是否会刷新页面
最后修改index.html 查看是否会刷新页面
今天主要学习了gulp的简单项目搭建及实时更新配置；其实gulp类似于grunt的弱化版，但更简单好用，只是插件会少一些，目前主流的项目搭建工具主要是webpack，但依然有不少项目还用着gulp或者grunt
扩展:
下面还有一些楼主的学习笔记:
有兴趣的可以多多交流@ 楼主博客
③ nodejs：用ejs模板和gulp实现前端组件化
最近在用nodejs将公司商城的底层重写。基于nodejs的强大，我从原本的只写前端变成了写全栈。
框架采用express,模板用ejs,前端用amazeui. 做完三个页面后，设计突然说要改UI设计，我勒个去，郁闷地一个个页面重新调整。下班之后反思一下，觉得花了太多时间在重复劳动上，是时候涉猎一下前端工程化的知识了。
用网络在互联网畅游了一番，总结了一下前端工程化的几个关键要素：编码规范化，结构模块化，流程自动化。本文所述的方法属于模块化，但只是简单地把dom，css,js拆分，以便更好地管理，而并非像vue框架那样的组件化，但这种方式可能更易于理解，可以作为过渡。
这是原来的目录结构
其中public目录里存放的是静态资源，按照传统的做法，css文件夹种存放less文件和css文件，img文件夹中存放图片资源，js中存放各页面（views目录中对应的页面）的js文件。
当页面越来越多，会遇到一些重复的部分。像图中的侧边菜单，顶部搜索框，底部菜单，在几个页面都有。如果每个页面拷贝一份样式，js，dom,当需求方要更改样式或者增加功能的时候，徒增工作量。
在一篇文章的启发下（ 前端开发工程化探讨 ），我将目录结构改成如下：
为了标准化，每个组件里的文件命名都相同。以侧边工具栏为例，dom.ejs是一个模板文件：
如果不熟悉ejs模板的语法，可以网络一下。另外，此模板还支持嵌套，并传入参数。
例如，下面是一个列表容器的dom结构，配合js可以实现上拉加载功能，但列表项的样式可能不一样，你可以在使用时再根据传入的templateName参数决定用哪个模板，非常灵活。
在使用模板时，这样嵌入页面。
注意，应使用<%-include()%>,而非<%=include()%>。<%-%>表示内容原样输出，不进行运算。而<%=%>会生成运算后的内容。
然后，再来考虑js和css文件应当怎么处理。如果在页面中逐个引入组件的js和css文件，维护起来会非常不方便。所以我考虑将某个页面涉及到的组件，还有页面本身的js和css打包成一个。这样做有个缺点，每个页面的js和css文件会有重复的内容。如果用seajs或requirejs等模块加载，可以解决重复的问题，但也可能增加项目的复杂度。考虑到打包后的文件只有10K大小，还是暂时使用打包的方法。有兴趣的朋友也可以将js模块化并测试一下性能。
打包涉及到gulp的应用，有许多文章谈论到，而我是通过开源项目学习的。
首先我需要写一个page-config.json文件，告诉gulp我要打包哪些资源：
将文件放在模板目录的根目录下面，与src,dist同级。src存放原文件，dist存放生成后的文件。
再写一个gulpfile.js,用于自动构建。
下面是gulp文件的写法：
在使用时，要在命令行安装gulp，切换到gulpfile.js所在的目录，运行gulp watch，这样，每次在css和js更改时，会自动重新打包。当然，为了不重复操作，你可以写一个脚本文件。
④ 前端自动化6部是个车间还是个什么意思
先来说说为什么要自动化。凡是要考虑到自动化时，你所做的工作必然是存在很多重复乏味的劳作，很有必要通过程序来完成这些任务。这样一来就可以解放生产力，将更多的精力和时间投入到更多有意义的事情上。随着前端开发不再是简单的作坊式作业，而成为一个复杂的工程时，还涉及到性能优化一系列工作等等，这时自动化已然是迫切的需求。
早期的网站开发
在还没有前端工程师这种分工如此明确的岗位时，大家所理解的前端工作无非就是制作网页的人，包括html、css、js等。稍微高级点的可能就是php了，可以读写数据库，可以称之为动态的网页。通过近几年的发展，分工越来越细，在大公司如BAT三家，基本是把前端分开来了，有专门的人写js，有专门的人写css。以前一个网页可以一个人搞定，包括切图，写页面到写逻辑，无非是几个资源链接拼凑起来。当然逻辑性不强，页面不重。
最简单的页面如下：
<!DOCTYPE html>
<html>
<head>
<style>....</style>
</head>
<body>
hello world
</body>
<script>
....
</script>
</html>
这样几个html标签就能展示成网页了。顺便写几个逻辑，填写几个表单就差不多了。这就是早期的网页。
javascript库
有一次需求你做了一个页面，然后第二次需求，你领导又让你做了页面，只是这次与上次的逻辑都差不多，就改改样式皮肤，修改图片等等。这样你就要从原来的地方拷贝一份代码过来。如果有一天发现一个bug，你就需要修改两处地方，这使得你非常的恼火，于是就把公共的逻辑抽取出来，两个页面都引用这段代码，这样就很好的解决了这个问题。以后有第三个第四个页面，你也不会担心了。渐渐的公共的代码越来越大，又是个独立的文件，这个文件就成为了一个库文件了，就像jquery等等。
模块化
随着业务的不断扩大，页面越来越多，逻辑越来越重，之前你提取出来的库文件越来越大，功能越来越多。A页面只引用了其中的一部分函数，B页面C页面同样如此，后来你决定将库文件拆分成更小的模块，由各自的功能决定应该在哪个模块。这样一来前端开发就此演化为模块化开发方式。你开发的产品就像搭建积木一样，将各个模块组装在一起。
网页优化
好了，现在你的工程很庞大了，文件数量新增了非常的多，JS模块也很多，这时候一个页面也能加载了上十个js文件或者好几个样式文件。用户访问你的网页的时候需要把这些资源从服务器下载下来，所以理论上来说，想要加快你的网站，比必须减少下载的时间。可以从下载的数量和下载的大小出发，在不做大改变的前提下就是减少HTTP请求数以及压缩文件大小。雅虎的网页优化十四条军规中很大一部分是针对这种情况进行优化，如：
1、合并请求
2、使用雪碧图
3、压缩js、css代码（除去空格，混淆等等）
4、延迟加载
在PC时代，这些问题可能不是那么尖锐。移动互联网的兴起，对网页速度提出了更高的要求，因为网速相对比较慢。也有新的优化措施出现，比如缓存js文件等。可是要做到这些，并不是很容易。假如你的页面引入十个JS文件，这样发布出去显然是不好的，所以你要手动合并，将十个JS文件合并成一个，或者几个。然后还要将合并后的文件进行压缩。发出去之后产品经理发现有个小问题需要优化一下，这时候你又要重复刚才的工作。如果这样的事情发生三次，或者更多次，你会变得恼火。当然这只是令你恼火的一点点因素而已，更多的还有合并雪碧图等等。
经历过几次痛苦之后，你会发现性能优化与工程本身之前存在一些矛盾的地方。就是在优雅的开发的同时，兼顾性能方面的考虑实在难以做到。这时自动化工具太有必要了，将开发与发布隔离开来。按照优化的准则，利用构建工具，在发布的时候轻松一键搞定，这将是最理想化的作业方式。
一些构建工具
nodejs的出现，给前端开发带来了一些改变。在没有任何语言障碍的情况下，前端同学可以转为后台开发，nodejs带来另外的一个福音便是构建工具。之前的压缩合并工具大多是由java编写的，像雅虎的yui compressor，但对没有java基础的前端开发来说，至少要走不少弯路。然后最近一两年比较火的是国外的grunt和gulp，以及国内的FIS。相比而言，国外总是走在前头，在探索更好的开发方式，做出了很多探索。
grunt
之前在鸟厂的时候，在组内也尝试推广过模块化的开发方式，主要是用seajs模块加载器，关于这个的好处我这里就不展开说明了。这种方式从11年开始到现在基本已经得到了认可，或者说是未来的趋势，ECMAScript 6已经将模块化加入了规范。等到浏览器支持应该是几年之后的事情。这种模式主要是参考了nodejs，将其思想运用到浏览器上。seajs模块化的诟病之处便是网络请求，上线前面临的一个问题就是模块太多，有十几个文件，需要合并和压缩，而且还不能简单的将文件合并在一起。有一套他自己的规则。
在开发的时候，一个模块对应一个文件，如下：
// a.js
define(function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define(function(require, export, mole){
// xxxxx
})
如果上线前简单的将这两个文件合并在一起，那么a模块是不能找到b模块，因此这样的做法是行不通。一个规则是根据文件的路径，给每个模块加上一个唯的id，id的值就是该模块的路径：
// a.js
define('a', function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define('b', function(require, export, mole){
// xxxxx
})
所以在自动化的过程中，需要提取模块的唯一ID，然后再进行合并。
grunt的插件很多，也非常的成熟，能够满足各式各样的需求。作为新手，我是琢磨了大概半个月的时间才大概了解了其配置文件的意思，但也只是知道用，不明白个所以然。grunt的运作方式就是根据配置文件加载相应的插件，完成相应的任务（task）。当时中文资料比较少，英文也比较晦涩，尤其是配置文件中各配置项的意思不太明白。而当文件多起来了，构建的效率明显跟不上。加上组内也不太重视，所以就没怎么去折腾了。转去鹅厂之后，grunt就无疾而终了。
gulp
没有在实战项目中运用过，暂不说明
组内的构建工具
刚来到鹅厂时，也有自己的一套构建工具，比较单一，项目不大。主要是将上文提到的seajs所带来的文件解决掉，提取模块ID，合并之。随着业务的发展，越来越不满足实际的需求，后来索性放弃了它，转而投向网络的FIS。
FIS构建工具
放弃之前的构建工具是因为一个尖锐的问题引起的，就是在发布的时候，有一段时间将会引起外网报错，就是页面已经出去，js文件却还是旧的，即使你在文件后面加上了查询参数也不太起作用。加上浏览器和CDN本身的缓存，这个问题一时之间找不到好的解决方案，唯一的办法就是采用新的文件，文件加上自身的hash值作为文件名。这样一来就瞄准了网络的FIS，它能够简单的实现我们所需要的功能。
核心思想是文件的定位，也就是在开发测试的阶段并不需要将文件hash，只需要在上线的那一刻来做这步。找到原有文件的依赖，将其替换为新的文件名。
理想都很美好，但现实真的很残酷。FIS上手相对于grunt是要简单些，但其一点也不简单。需要理解整体的思想才能去实施，而且小白用户基本不会使用，除非是一些简单的合并需求。但复杂的业务场景FIS是满足不了的。包括前面提到的模块ID的提取，seajs模块文件的合并等都需要进行二次开发才能够做到。
很多页面是嵌入到APP内部的，APP本身也可以做一次缓存，根据特定的文件名规进行缓存，彻底消灭了304请求，如果每次都是新文件，在服务器端也可以配置更长久的缓存期，所以这里也需要定制开发。
FIS最值得诟病的地方就是全局构建，这一点不仅使得构建速度快不起来，而且生成的新文件特别多，导致发布的时候去挑选文件。在多人协作开发的时候，会产生冲突，发布的过程极其的痛苦，不知道网络内部的人是怎么使用的。望着文件夹满是hash的文件名，瞬间就奔溃了。这是小组内部使用FIS后，血的教训。
后来决定大刀阔斧的对FIS进行改造。在构建的时候只生成相关的资源文件，核心是找到该文件所依赖的所有的资源文件。当然还是全局构建，只是在生成文件的时候不生成其他不相关的。
这样发布工作变得非常轻松，一目了然。然后配合现在的发布工具，基本上整个开发发布流程也比较顺畅了。那天小组会议讨论，构建工具的理想目标是什么，这个问题我也没有细想过，总之就是要从重复的劳动中解放出来，把时间花在值得的地方。或许可以采用一键发布，这可能就是理想，也是后期可以考虑再优化的地方。
现在组内所采用的构建工具，已经和FIS本身有很大的差别了。进行了很多地方的改造，后面有机会进行整体的开发发布流程分享，以及我的一些构建思路。
iamaddy
关注
1
0
0
专栏目录
4款前端自动化构建工具的介绍与对比.zip_java自动化框架
01-07
4款前端自动化构建工具的介绍与对比.zip 大家都知道webpack是当人不让的前端自动化构建工具,但是除了它还有其它常用的前端打包工具存在,现在我们来比较4款
前端自动化构建工具(Grunt,、Gulp、 Webpack)
01-02
<span style="color:#404040;">使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到最后实现自动化构建项目。是前端工程师必备的技能之一。 本套视频主要讲解当前开发中最流行的三种自动化构建工具: Grunt, Gulp, webpack。从理解什么是构建工具，为什么要用构建工具，到如何去使用构建工具。 学习本套视频之前 建议先学习 JS 模块化。</span>
如何实现自动化前端开发？
CSDN资讯
7051
IDE不仅是文本编辑器，还是编译器、生成器、调试器和集成器。 作者 |Nicolus Rotich 译者 |弯月，责编 | 郭芮 出品 | CSDN（ID：CSDNnews） 以下为译文： 每一行代码都可以表示为字符串变量，无论代码本身执行了哪些操作。 这就是我们使用文本文件（即集成开发环境，IDE）向计算机发布指令的根本原因，我知道你一定在想：文本编辑器的名字也太高级了吧。...
前端自动化发布实战总结
weixin_34418883的博客
163
为什么要做 今年4月份，开始自己的第二份工作，习惯了老东家如丝般的发布体验，一下子感觉来到了“原始社会”。 首先这是一篇长文，主要介绍自己在做自动发布这个过程的一些思考。 引用玉伯的Web研发模式演变来说，现在我们处于 - Web1.0时代： 前后端代码耦合 java环境对前端过于复杂 缺乏工具和规范，代码难维护 内嵌代码：html内嵌js，j...
前端项目自动化部署
最新发布
@SCY
392
本文主要内容为三个方面： 一、使用Git仓库来管理项目 二、如何使用云服务器 三、使用Jenkins进行自动化部署
如何实现Web前端自动化？让这些工具帮助你
xiaoxijing的博客
1569
随着前端技术的发展，前端开发从静态网页的开发到复杂的前后端交互再到基于node.js的全栈开发，前端需要做的事情越来也多，前端代码的逻辑和交互效果越来越复杂，越来越不易于管理。模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。在新技术不断涌入的多元化发展模式中，Web前端工程师的工作量也越来越大。前端自动化构建在整个项目开发中越来越重...
前端工程化实战 - 自动化构建工具
每天进步一点点
496
最典型的运用场景就是在去开发网页应用时就可以使用： main.scss index.html package.json 安装 Sass 模块 安装完成后，在 node_moles 下有一个 .bin 目录，这个目录下有一个 Sass 的命令文件，可以使用指令打开帮助信息 将 Sass 文件转换成 CSS 使用 或 启动 实现自动化构建 （1）安装 browser-sync 模块，用于启动一个测试服务器，去运行项目 （2）在 scripts 中添加 serve 命令，通过 br
前端自动化部署
qq_41206257的博客
2689
名词解释 集成：在推送或者 merge 代码后自动进行构建打包 交付：将上一步生成的代码包发布至测试、生产等环境 需求 在 git 代码仓库发生变化后，自动执行打包脚本，并且发布至服务器。 解决的问题 在之前每次开发完毕需要上线之前，需要手动执行 bash 命令打包，并且将打包后的代码人为的拖动至上传应用（FlileZilla Pro）。 手动执行构建脚本消耗时间人力 而拖动代码文件会存在拖拽错误，覆盖之前的其他项目代码等难以预料的问题 工具选择 gitlab/github/gitee Jenki
前端自动化介绍
张营的技术博客
1815
文章目录DevOps介绍前端自动化自动化相关概念问题提出常见现象最佳实践 DevOps介绍 相信大家或多或少的听过这个词DevOps，而且看起来很高大上，其实这个是敏捷开发的一种执行流程表现，先来一张经典的DevOps流程图： 具体的流程为： 先是计划plan，编码code，然后编译build，测试test（Dev） 然后发布release，部署deploy，运维operate，监控monitor（Ops） 然后发现问题或有新的需求，就重新计划plan。。。如此循环 这就是完整的DevOps流程。 下
前端项目自动部署
weixin_29005819的博客
1190
一、实现的最终效果 点击一下，即可实现 项目打包 文件压缩(便于上传到服务器) 连接服务器 备份 上传打包的文件 解压 完成部署 二、原理及需要的插件 原理： 执行shell脚本 需要的npm依赖包：archiver(压缩)，ssh2（执行脚本：如连接服务器，解压等操作） 三、详细步骤 3.1 安装包 yarn add archiver ssh2 3.2 引入包和编写配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa
前端自动化测试详解
wdquan19851029的专栏
2405
这篇文章主要向大家介绍前端自动化测试详解,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。 1 前言 文章研究了四个问题：什么是自动化测试、为何要自动化测试、什么项目适合自动化测试、自动化测试具体要怎么作。在寻找这四个问题答案的过程当中，梳理了一套完整的前端自动化测试方案，包括：单元测试、接口测试、功能测试、基准测试。 2 什么是自动化测试 维基网络是这样定义的html 在软件测试中，测试自动化（英语：Test automation）是一种测试方法，使用特定的软件，去控制测试
Gitlab-ci:从零开始的前端自动化部署
大灰狼的小绵羊哥哥的博客
2669
前言 本文为首发原创，同时转载至公众号“全栈前端精选“和“广发证券金融科技”中 目录 一.概念介绍 1.1 gitlab-ci && 自动化部署工具的运行机制 1.2 自动化部署给我们带来的好处 二.知识预备 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本语法规则 2.3 .gitlab-ci.yml配置的特定关键字 三.CI实战 3.1 编写一个gitlab-ci的“he
vue前端用服务器上路径的图片展示_谈谈前端性能自动化
weixin_39968640的博客
1445
前述：前段时间出了性能分析的需求，需要对前端页面性能做一套自动化测试工具。领导都发话了，那咱说干就干。花了一周时间去找资料以及匹配优秀并且合适的开源插件。花了一个月的时间(断断续续，需求也要做的~)完成了这个工具的建设和开发。目前也搭建了一套平台来支撑这样的工具使用。前端用的VUE，后端用的node(由于本人较熟悉前端)，数据库用的是mangoDB。好了，话不多说，上才艺~设计背景 & 前...
实现前端项目自动化部署（webpack+nodejs）
winne雪
2097
前言： 一般来说，我们前端是不需要关心部署的事情的，只需要把打包后的文件直接丢给后台去部署就可以了。但是呢，如果频繁修改一点东西就要叫后台进行部署，这样后台会很烦（毕竟人家还有其他工作嘛），我们也会很不好意思。 或许有些公司会给前端配置可视化操作服务器文件的软件（FTP客户端），这时我们就可以打包后自己到服务器上部署了，如果不同环境需要部署到不同服务器，此时我们又需要区分打包再手动上传到服务器上。 这时我们就会想，有没有直接一句命令就能自动化部署到不同服务器上，根本不需要打开软件来手动上传的？？？ 答案：必
前端项目自动化部署——超详细教程（Jenkins、Github Actions）
q411020382的博客
1374
参考资料 Docker 入门教程
常用的前端自动化构建工具gulp/grunt/fis --简介
杜杜的博客
235
常用的前端自动化构建工具 之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力，那么我们会了解 Gulp Grunt fIS 用法基本相同：都是通过一些简单的代码，组织一些插件的使用，然后就可以用工具代替我们一些重复的工作，增强开发效率。 Grunt 是基于内磁盘实现的 最早的自动化构建工具 Grunt(点击可进入官网查看) 优点： 它的插件几乎可以帮助我们完成任何我们想要做的事情， 缺点： 由于工作过程是基于临时文件去实现的，所以构建速度较慢。 下
前端自动化部署项目到服务器 -- 一行命令搞定，摒弃传统的手工部署 npm run build
一个来自外太空的游客
2353
传统的前端代码手工部署流程如下： 传统的手工部署需要经历： 1.打包，本地运行npm run build打包生成dist文件夹。 2.ssh连接服务器，切换路径到web对应目录下。 3.上传代码到web目录，一般通过xshell或者xftp完成。 传统的手工部署存在以下缺点： 1.每次都需要打开xshell软件与服务器建立连接。 2.当负责多个项目且每个项目都具有测试环境和线上环境时，容易引起部署错误。 （个人之前非常悲剧地遇到过一次，由于同时负责四个项目，八个环境。一天同时可能修改多个项目，
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
©️2022 CSDN 皮肤主题：大白 设计师：CSDN官方博客 返回首页
关于我们
招贤纳士
商务合作
寻求报道
400-660-0108
[email protected]
在线客服
工作时间 8:30-22:00
公安备案号11010502030143
京ICP备19004658号
京网文〔2020〕1039-165号
经营性网站备案信息
北京互联网违法和不良信息举报中心
家长监护
网络110报警服务
中国互联网举报中心
Chrome商店下载
账号管理规范
版权与免责声明
版权申诉
出版物许可证
营业执照
©1999-2023北京创新乐知网络技术有限公司
iamaddy
码龄8年
暂无认证
3
原创
42万+
周排名
115万+
总排名
8683
访问
等级
122
积分
2
粉丝
3
获赞
0
评论
1
收藏
私信
关注
热门文章
聊聊前端自动化 3903
扒一扒前端构建工具FIS的内幕 3474
web前端性能优化–缓存 1306
分类专栏
javascript
3篇
技术
3篇
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
扒一扒前端构建工具FIS的内幕
web前端性能优化–缓存
2015年1篇2014年2篇
举报
————————————————
版权声明：本文为CSDN博主“iamaddy”的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/iamaddy/article/details/42364137
⑤ 前端通过gulp编译后的文件，怎么部署到服务器
服务器上写部署脚本，从代码库里拉项目代码，跑gulp自动化。或者打包传给后端让他搞。
⑥ gulp怎么样配置前端目录结构
装merge-stream吧，npm install --save-dev merge-stream，然后代码改改：
var gulp = require("gulp");
var sass = require("gulp-sass");
var merge = require('merge-stream');
// 复制静态资源
var staticfolder = [];
var fonts = {
dist: "dist/fonts/",
src: "src/fonts/**/*"
}
var img = {
dist: "dist/img/",
src: "src/img/**/*"
}
staticfolder = [fonts, img];
gulp.task("static", function () {
var streams = staticfolder.map(function (item) {
return gulp.src(item.src).pipe(gulp.dest(item.dist));
})
return merge.apply(null, streams);
});
gulp.task("static:watch", function () {
var folder = staticfolder.map(function (item) {
return item.src
});
gulp.watch(folder, ["static"])
})
gulp.task("default", ["static:watch"]);
应该就好了
⑦ webpack和前端的一些构造工具，如gulp有什么不同
Gulp应该和Grunt比较，他们的区别我就不说了，说说用处吧。Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。
说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。
seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、mole 这些东西。也就实现了模块化。
browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。
这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
⑧ 前端项目gulp编译工具打包慢怎么办
下面几个插件，按需索取哈，反正我是都有了。
有多文件用的，有对dev-watch时用的，都有效果。
https://www.npmjs.com/package/gulp-cache
https://www.npmjs.com/package/gulp-cached
https://www.npmjs.com/package/gulp-remember
https://www.npmjs.com/package/happypack
先上图
等views下面业务模块有50+，widget目录下面有20个左右。。。那编译一次真的是呵呵呵
所以我们增加了一个.localBuildConfig.js
让同学们只编译/监听自己想要的文件即可，同时在编译log中给予提示
⑨ 前端工具里面gulp和fis，有哪些优缺点
优点和缺点：
gulp轻量级，你的项目可能由于历史原因，或者其他原因，fis的一些基础要求可能和你项目有冲突。比如你可能只想处理整个项目中的一个模块，或者你不太想在本地开发使用绝对路径，或者你的项目和程序员分工页面模板（jsp，php等）和前端资源不在同一个资源位置。这个时候你更适合使用gulp来定制自己的解决方案。
但是gulp使用者来说，并不是每个人都有非常强的处理错误能力，如果遇到插件bug（当然这种情况很少见），需要联系作者，这个是一件非常棘手的事情。但是这种风险是存在的。
fis相对来说因为有专门的QQ群天天为用户答疑解惑收集bug处理bug，压根就不用担心太多问题。另外fis的一些解决方案确实是目前前端优化里面会需要真实考虑面对的。接触fis会让你对整个前端的优化和加载管理有更深入的了解，当然如果你已经了解很透彻了。我相信对于选择gulp 和fis这种困惑应该也不会存在。
⑩ 前端小萌新必知必会 之 实现自定义Gulp插件
随着 node 的出现， javascript 的舞台越来越大，能做的事情越来越来。
本篇，我们来聊一聊前端工程化构建工具 Gulp , 并定制符合特定需求的 Gulp 插件 。
Gulp是一个自动化和增强工作流的工具包利用Gulp和JavaScript的灵活性来自动化缓慢、重复的工作流，并将它们组合成高效的构建管道。
废话说完，接下来，都是干货啦！
完全展开以后是这样的
注意， 如果希望 gulpfile 文件也能写es6 语法， 需要装个库： yarn add @babel/register。所有已配好，此处用的是 gulp.babel.js
下面一个一个来分解：
package.json
先用 yanr install 装一下需要用到的包
1. 关于 gulp 的pipe
pipe 意味管道， 很好理解，文件流通过 pipe 管道， 那么就可以在这个过程中对文件流进行操作，定制自己的需求。 所有的处理都是在 pipe 中进行的。例如上图中的例子,
！！那么同理： 我们也可以加入自己写的 gulp 插件 对文件流进行处理
2.实现
我们先来实现一个很简单的功能， 比如 在所有的 js 文件里添加注释 this is js， 在所有css 文件里添加注释 this is css， 在所有其他类型的文件里添加 this is other。 具体实现如下：
selfPlugin.js