webpack和gulp的区别？如何配置 一个简单的gulp 自动监听事件

本文目录

• webpack和gulp的区别
• 如何配置 一个简单的gulp 自动监听事件
• gulp在项目中怎么使用
• 如何使用gulp解决内核前缀问题
• 关于gulp的描述正确包括哪些
• 前端工具里面gulp和fis，有哪些优缺点
• gulp有哪些功能是webpack不能替代的

webpack和gulp的区别

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作1.构建工具2.自动化3.提高效率用webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案1.打包工具2.模块化识别3.编译模块代码方案用所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！【当然，也有相似的功能，比如合并，区分，但各有各的优势】

如何配置 一个简单的gulp 自动监听事件

直接点的：

gulp.watch(’file’,);

这样就行了，gulp.watch()就是自动监听函数，file那里填要监听的文件，taskName那里填对应要执行的任务名称，也可以把taskName换成相应function()：

gulp.watch(’file’,function(event){    //具体的一些进行处理的代码});

也可以像这样：

var watcher = gulp.watch(’js/**/*.js’, );watcher.on(’change’, function(event) {  console.log(’File ’ + event.path + ’ was ’ + event.type + ’, running tasks...’);});

具体怎么用还是多看下gulp的文档吧，毕竟只有熟悉了才能灵活发挥。

gulp在项目中怎么使用

1. 安装node.js--》http://www.runoob.com/nodejs/nodejs-install-setup.html

2. 安装gulp

• 【使用npm--》NPM是随同NodeJS一起安装的包管理工具】

• cmd进入到需要安装npm的目录 使用命令【本地和全局都需要安装】

• npm install gulp      本地安装

• npm install gulp -g   全局安装

3.npm init --yes 命令生成package.json

4.安装需要的模块【例如：npm install gulp-less --save-dev】

5.新建gulpfile.js文件--》

• a）加载模块require

• b）定义任务gulp.task

• c） 定义默认任务

• d）启动监听更新

• e）处理异常不终止watch任务（命令gulp-plumber）

• 【详情如下】

6.【命令行】编译默认任务--》gulp

编译指定任务--》【gulp 《name》】--》例如：gulp less

如何使用gulp解决内核前缀问题

检查你的 node 版本和 gulp 版本1、如果没有安装node可以参考我的《CentOS 7下手把手搭建hexo博客》中使用nvm来管理node；2、如果没有安装gulp可以使用npm install --global gulp全局安装 gulp；3、检查你的 node 版本和 gulp 版本；$ node -vv5.0.0$ gulp -v Local version 3.9.0初始化项目目录使用 npm init 创建一个 package.json 存储依赖关系等配置信息，推荐使用，如图给出一个例子；；创建 gulp 的配置文件 gulpfile.js，开始很简单，如图：使用git init 创建版本库，并简单配置，如果不熟悉git操作可以去官网先看看;测试gulp命令$gulp如图所示一切ok，现在没有任务；安装依赖插件$ npm install --save-dev gulp-autoprefixer browser-sync gulp-notify其中：gulp-autoprefixer 根据浏览器版本自动处理添加浏览器前缀browser-sync 能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面gulp-notify 用于任务提醒安装过程比较长慢慢等待，不过一定要确认安装成功；安装成功之后package.json会保存插件，当前目录下会创建目录node_modules保存安装的插件；5以 browser-sync 为例来配置 gulpfile.js 文件1、修改gulpfile.js如图所示：2、创建源码目录src；3、终端运行gulp，当修改文件的时候终端会发生变化；

关于gulp的描述正确包括哪些

gulp down / wolf down / 都是表达【狼吞虎咽】的正确表达 swallow down 只表示【吞下；咽下】,并没有表明吞咽的方式. suddenly,a fox appeared,it jumped up to hold tight a rabbit and swallow it down. 突然,一只狐狸出现了,它跳起来抓牢了兔子并且把它吞了. Late for work again,she gulped down a cup of milk,with no time for anything to eat. 上班又要迟到了,她把一杯牛奶一饮而尽,再没有时间吃其他东西了

前端工具里面gulp和fis，有哪些优缺点

优点和缺点：gulp轻量级，你的项目可能由于历史原因，或者其他原因，fis的一些基础要求可能和你项目有冲突。比如你可能只想处理整个项目中的一个模块，或者你不太想在本地开发使用绝对路径，或者你的项目和程序员分工页面模板（jsp，php等）和前端资源不在同一个资源位置。这个时候你更适合使用gulp来定制自己的解决方案。但是gulp使用者来说，并不是每个人都有非常强的处理错误能力，如果遇到插件bug（当然这种情况很少见），需要联系作者，这个是一件非常棘手的事情。但是这种风险是存在的。fis相对来说因为有专门的QQ群天天为用户答疑解惑收集bug处理bug，压根就不用担心太多问题。另外fis的一些解决方案确实是目前前端优化里面会需要真实考虑面对的。接触fis会让你对整个前端的优化和加载管理有更深入的了解，当然如果你已经了解很透彻了。我相信对于选择gulp 和fis这种困惑应该也不会存在。

gulp有哪些功能是webpack不能替代的

gulpcodingdict.com/article/7496 是以流的形式来执行多项依赖任务，它提供的功能是处理任务依赖和任务流。而 webpack 主要用于打包前端资源，将模块化的JS打包成单一文件(或少量入口+公用文件)。作用不同，不可能完全互相替代。

为什么使用Gulp?

• 和其他任务管理器相比，它非常小，很简单，非常快。
• 使用SASS和LESS作为CSS预处理器。
• 源文件后，自动刷新页面。
• 它使用Gulpfile.js构建系统，非常容易掌握，它使用纯JavaScript来构建任务。

优点

• 和其他任务运行器相比速度优势明显。
• 容易编码和掌握。
• web应用容易测试。
• 插件丰富。
• 完成一些重复性工作，例如：压缩样式，压缩图片等。