关键词：
前言
什么是gulp？gulp有什么用？为什么用gulp？
gulp是前端开发的一种构建工具。
构建工具可以帮助我们工程化地开发项目，比如搭建本地服务器、编译CSS预处理器、保存文件后自动刷新浏览器而不用我们手动去刷新、多个文件合并并压缩、压缩图片等。
gulp在多种构建工具中，算是简单的了，其他构建工具有Grunt、Webpack（何其复杂！）。
所以我们先来个简单的。
使用
首先，使用gulp这种构建工具你必须要会使用npm。
npm是node.js的包管理工具，只要你安装了node.js，就能使用npm了。
所以，我们得先来安装node.js。
官网：https://nodejs.org/zh-cn/
windows系统的选择左边的就行了，其他系统的点击“其他下载”。
下载安装好之后就自然而然地可以使用npm命令了，因为这是node.js自带的。
既然要使用命令，那我们就得去可以敲命令的地方也就是命令行工具。
如果你不知道什么是命令的可以去望一眼linux的内容，学几个命令，也是非常简单的。
windows系统，我们可以使用cmd（开始 - 在搜索框输入“cmd”）打开终端（一个可以敲命令的地方）输入命令。
不过我建议使用vscode（免费的编辑器，可以自行下载）的终端敲命令，这样会非常方便。
其他系统的我不再介绍了，因为你使用其他系统就已经是大佬级了。
打开vscode，点击 查看(v) - 终端(T)
就像上图，你可以看到会出现一个窗口，这个窗口和用cmd打开的窗口是一样的，我们就在这里输入命令。
我们先回到桌面创建一个文件夹“test” 
。
用vscode打开这个文件夹（文件(F) - 打开文件夹(F)），就像这样 
。
好了，现在我们就处于这个文件夹内了，
。
上面的这些操作完全可以用命令做到，所以学一些命令行的知识还是很有必要的。
我们先输入我们的第一个命令 npm init 来初始化我们的项目，它会出现像下面这样子：
如果你看不懂英文一直回车就行了。
回车完了之后它就生成了一个文件（配置项目信息），接着我们就来安装gulp，输入我们的第二句命令 npm install --save-dev gulp ，
可以看到它在下载并安装了 
。
安装完之后出现一个 node_modules 文件夹，里面是node的各种模块，在学习过程中，遇到陌生的东西先不要去深究，按着步骤走下去。
我们之后安装的gulp的各种插件都能在这个文件夹里找到。
现在我们搭好了基本的环境之后，在开始真正使用gulp之前，我们先要确定我们项目的目录结构，如：
文件夹 app 就是我们开发的项目的目录，文件夹 dist 存放的是要放到生产服务器（最终上线给用户用的）上的文件。
现在我们就来写我们的gulp，在根目录下创建一个 gulpfile.js 文件 
，
因为我们已经安装过gulp了，所以
接着我们在终端输入命令 gulp hello ，可以看到我们的输出
（这里如果报错，提示无法使用gulp，那么请全局安装gulp，输入命令 npm install gulp -g）
gulp的所有操作都是基于 gulp.task() ，顾名思义就是创建一个任务，然后去执行它
上面的例子是一个最简单的使用，现在我们模仿项目开发，使用sass，
输入命令 npm install gulp-sass --save-dev 安装 gulp-sass
像上面那样就有看到版本号就说明是安装成功了。
（如果在这里没有能安装成功，有的同学可能会使用淘宝镜像去安装，也就是cnpm，至于什么是淘宝镜像大家可以去百度。
但使用cnpm虽然可以安装成功，但会和使用npm安装的插件产生冲突，这是我自己测试的结果，大家可以自己尝试。
使用npm安装失败，请多尝试几次，我自己在安装过程觉得是跟网络有关。）
安装完之后，引用它
接着我们在文件夹scss下创建一个test.scss文件，用sass的语法编写代码
然后将它编译为.css文件
在终端执行命令 gulp sass
可以看到在文件夹css下生成了一个test.css文件
搭建一个本地服务器，先安装，输入命令 npm install browser-sync --save-dev，安装完成后
在终端输入命令 gulp browserSync，可以看到会弹出一个浏览器窗口。
但现在还不能做到自动刷新浏览器，我们想要达到的效果是，每当我们的文件（html/scss/js）保存修改，浏览器会自动刷新。
所以我们需要用到 gulp.watch，同样，再开启一个任务来完成这件事情，
执行 gulp watch 命令，然后再修改你的文件保存，比如修改test.scss，会发现浏览器已经完成了刷新。
现在，你应该对gulp不陌生了吧，那么现在我们再来做最后一件事，
将多个文件合并成一个文件并输出到文件夹dist，用于生产，
一口气安装这些插件
这里要着重讲一下 gulp-useref 这个插件，编写我们的index.html文件
注意，这里的注释一定不能省略，这个注释让插件知道要合并的文件哪些哪些及输出到哪个位置和合并后的文件名。
然后执行命令 gulp useref，看看你的项目发生了什么变化。
文档：https://gulpjs.com/
参考：https://w3ctrain.com/2015/12/22/gulp-for-beginners/?utm_source=tuicool&utm_medium=referral
续gulp使用入门编译sass
使用gulp编译SassSass是一种CSS的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得CSS的开发，变得简单和可维护。安装npminstallgulp-sass(--save-dev)括号中的可选基本用法SomethinglikethiswillcompileyourSassfiles:‘usestrict‘;varg... 查看详情
gulp入门(代码片段)
...些资料，学会了怎么使用gulp进行压缩，特地写个简单的入门操作指南，加深自己的印象。gulp能够实现很多功能，在这里我就以自己使用的压缩js文件为例子进行介绍1.安装nmpNPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码... 查看详情
gulp简单安装和入门(适用刚接触gulp的同学)(代码片段)
一、gulp 1、gulp主要用来在前端开发过程中对代码进行自动化构建的工具，能大大提高前端开发效率。 2、主要对js/sass/less/html/image/css等静态资源文件进行合并、压缩、格式化、浏览器自动刷新、部署文件生成、转换等操... 查看详情
gulp使用1-入门指南
入门指南1.全局安装gulp：$npminstall--globalgulp或使用cnpm2.作为项目的开发依赖（devDependencies）安装：$npminstall--save-devgulp3.在项目根目录下创建一个名为 gulpfile.js 的文件：vargulp=require(‘gulp‘);gulp.task(‘default‘,function(){// 查看详情
glup入门
本文是gulp的入门级介绍，主要内容包括什么是gulp，gulp与grunt有什么区别，gulp可以解决grunt存在的哪些问题，以及一个简单的说明例子。什么是gulpgulp的官方定义非常简洁： 基于文件流的构建系统 。这里强调了streaming，... 查看详情
gulp的使用以及gulp新手入门教程
Gulp新手入门教程原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/Gulp是一个自动化工具，前端开发者可以使用它来处理常见任务：搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源，比如压缩CSS、JavaScript... 查看详情
glup快速入门整理(代码片段)
Gulp介绍中文主页:http://www.gulpjs.com.cn/gulp是与grunt功能类似的前端项目构建工具,也是基于Nodejs的自动任务运行器能自动化地完成javascript/coffee/sass/less/html/image/css等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试... 查看详情
js那些事儿——gulp的入门使用
前言新人使用gulp的一个记录。首先对于第一个新事物，我会问gulp这是什么？答：gulp是一个自动化构建工具，它可以做一些自动化的任务，比如:检查Javascript编译Sass（或Less之类的）文件合并Javascript压缩并重命名合并后的Javascript... 查看详情
gulp入门(代码片段)
...些资料，学会了怎么使用gulp进行压缩，特地写个简单的入门操作指南，加深自己的印象。gulp能够实现很多功能，在这里我就以自己使用的压缩js文件为例子进行介绍1.安装nmpNPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码... 查看详情
gulp安装及使用
測试环境Mac:10.10.4Gulp:3.9.0时间:2015年08月15日18:07:08安装Gulpsudonpminstall--globalgulpnpminstall--save-devgulp输入gulp-v,显示版本号说明成功安装使用Gulp在项目根文件夹创建gulpfile.js文件vargulp=require(‘gulp‘);//引用gulpgulp.task(‘defaul 查看详情
前端构建工具gulpjs的使用介绍及技巧
...runtjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp... 查看详情
前端构建工具gulpjs的使用介绍及技巧
...runtjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp... 查看详情
续gulp使用入门三步压缩图片
gulp压缩图片压缩图片文件可降低文件大小，提高图片加载速度。找到规律转换为gulp代码规律找到images/目录下的所有文件，压缩它们，将压缩后的文件存放在dist/images/目录下。gulp代码一、安装gulp-imagemin模块提示：你需要使用命... 查看详情
gulp快速入门
Gulp是基于流的前端自动化构建工具使用步骤：1.安装node和npm 访问国外服务器网速不好时，安装依赖模块时会缺少文件。可以安装国内的镜像，之后使用cnpm命令代替npm命令。 npminstallcnpm-g--registry=https://registry.npm.taobao.org2.... 查看详情
gulp入门学习
一、gulp简介 gulp是一个自动化构建工具。在开发过工程中，能够使用gulp对项目进行自动构建，大大提高工作效率。二、安装gulp 在安装gulp之前先要确认已经正确安装了node.js，然后在项目根目录下安装gul... 查看详情
gulp入门
入门http://www.tuicool.com/articles/FJVNZf1、全局安装sudonpminstall-ggulp 以下需要进入项目目录：2、项目安装如果项目需要其他nodejs其它包，请先创建package.json，只用gulp,可以直接使用下面命令cnpminstall--save-devgulp3、安装gulp组件例如：n... 查看详情
gulp入门教程
gulp是什么？ gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们... 查看详情
gulp介绍及常用插件使用方法(代码片段)
gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。一、API介绍gulp常用的API只有四个：gulp.task(),gulp... 查看详情