gulp

第三方模块 Gulp Gulp是什么？ Gulp是基于node平台开发的前端构建工具 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了 用机器代替手工，提高开发效率。 快速入门Gulp JavaScript 和 Gulpfile Gulp 允许你使用现有 JavaScript 知识来书写 gulpfile 文件，或者利用你所掌握的 gulpfile 经验来书写普通的 JavaScript 代码。虽然gulp 提供了一些实用工具来简化文件系统和命令行的操作，但是你所编写的其他代码都是纯 JavaScript 代码。 Gulp能做什么 项目上线，HTML、CSS、JS文件压缩合并 语法转换（es6、less …） 公共文件抽离 修改文件浏览器自动刷新 Gulp使用 使用npm install gulp下载gulp库文件 在项目根目录下建立gulpfile.js文件 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件 在gulpfile.js文件中编写任务. 在命令行工具中执行gulp任务 Gulp中提供的方法 gulp.src()：获取任务要处理的文件 gulp.dest()：输出文件 gulp.task()：建立gulp任务 gulp.watch()：监控文件的变化 const gulp = require ( 'gulp'

Gulp随着版本的更新，一些方法也有了变化，踩了几个坑，为了让自己以后用的时候不再踩上去，于是就准备写一下并记下来。。 1. 如何使用gulp插件 第一步，你要装好 Node.js。 官网下载地址： http://nodejs.cn/ 。一路点下一步装完按 win+R 进入 cmd 里分别输入 node -v 和 npm -v ，如果都出现了一串数字（版本号），那么你就安装成功了。就像图中所示： 第二步，你要装好Gulp。在cmd中，要先切换到你要装Gulp的项目所在的文件夹，再输入命令 npm install gulp 就比如你要在D盘中的 “D:\project\gulp-demo” 路径下安装，就按图操作： 第三步，就是安装对应的插件了。要什么插件，直接在官网 https://www.npmjs.com/ 里面搜就完事了。 几个常用插件，另外的按照需求search就好： gulp-htmlmin（压缩html） gulp-file-include（抽取公共代码) gulp-babel （转换js代码格式） gulp-uglify（压缩js代码） 2. 常遇到的问题 可能是因为Gulp版本的更新吧，会出现一些小问题。 （1）Did you forget to signal async completion? //使用gulp.task()建立任务 //1.任务名称；2

1. 书写方式 grunt 运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，导致认知成本的提高，运用的时候要搞懂各种插件的配置规则。 gulp 是用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp. src , gulp. pipe , gulp. dest , gulp. watch gulp. task 等接口,运用相当简单。经尝试，使用gulp的代码量能比grunt少一半左右。 2. 任务划分 gulp 是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作 1. 构建工具 :　 可以用构建基础项目 2. 自动化 : 可以通过gulp.task配置各接口自动对js,css,html代码进行压缩, 自动刷新页面( IDE好多已经可以自动刷新了 ) 3. 提高效率用 : 可以编译less语法,可认快速对css的编辑 webpack 是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案 1. 打包工具 : gulp 也可以,但是需要按项目配置属性项 , webpack 很集成了,简单 2. 模块化识别 3. 编译模块代码方案用 所以定义和用法上来说 都不是一种东西