㈠ 前端通过gulp编译后的文件，怎么部署到服务器
服务器上写部署脚本，从代码库里拉项目代码，跑gulp自动化。或者打包传给后端让他搞。
㈡ 前端自动化构建工具gulp有什么用
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
㈢ 前端工具里面gulp和fis，有哪些优缺点
优点和缺点：
gulp轻量级，你的项目可能由于历史原因，或者其他原因，fis的一些基础要求可能和你项目有冲突。比如你可能只想处理整个项目中的一个模块，或者你不太想在本地开发使用绝对路径，或者你的项目和程序员分工页面模板（jsp，php等）和前端资源不在同一个资源位置。这个时候你更适合使用gulp来定制自己的解决方案。
但是gulp使用者来说，并不是每个人都有非常强的处理错误能力，如果遇到插件bug（当然这种情况很少见），需要联系作者，这个是一件非常棘手的事情。但是这种风险是存在的。
fis相对来说因为有专门的QQ群天天为用户答疑解惑收集bug处理bug，压根就不用担心太多问题。另外fis的一些解决方案确实是目前前端优化里面会需要真实考虑面对的。接触fis会让你对整个前端的优化和加载管理有更深入的了解，当然如果你已经了解很透彻了。我相信对于选择gulp 和fis这种困惑应该也不会存在。
㈣ 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更改时，会自动重新打包。当然，为了不重复操作，你可以写一个脚本文件。
㈤ 前端构建工具和打包工具有啥区别
Webpack是一个前端模块化方案，更侧重模块打包。我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
Webpack就是需要通过其配置文件（Webpack.config.js）中 entry 配置的一个入口文件（JS文件），然后在解析过程中，发现其他的模块，如scss等文件，再调用配置的loader或者插件对相关文件进行解析处理。
两者区别
虽然Gulp 和 Webpack都是前端自动化构建工具，但看2者的定位就知道不是对等的。Gulp严格上讲，模块化不是他强调的东西，旨在规范前端开发流程。Webpack更明显的强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。
以上就是介绍的前端构建工具 Gulp 和 Webpack，以及两者之间的区别。如今互联网发展迅速，Web前端人员也应该与时俱进的不断学习。
㈥ 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.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
扩展:
下面还有一些楼主的学习笔记:
有兴趣的可以多多交流@ 楼主博客
㈧ 前端小萌新必知必会 之 实现自定义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
㈨ 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"]);
应该就好了
㈩ 前端项目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中给予提示