gulp快速入门&初体验
前言
一句话先css
gulp 是一个能够简单和自动化"管理"前端文件的构建工具
先说我之前的主要工做，我主要是作游戏服务端的，用c++/python，因此我对东西的概念理解不免要套到本身作过的技术上，因此有时候有些技术说法对不上，还请看到这篇文章的人指正指正。html
gulp快速入门&初体验
- 干吗的
- 为啥用
- 咋安装
- hello world
- 简单用
- 总结
- 参考文档
干吗的
简单的说前端
- 前段构建工具
- 自动化 管理前端代码
gulp 的做用就是帮你处理前端文件， 什么
js什么html什么css还有json等等前端文件。
麻溜的！自动的！把本该由你合并，压缩，重命名，检查，编译等等一系列操劳的动做，一个命令，一条龙的作齐咯！node为啥用
显著的优势python
- 显著提升前段工做效率
- 学习简单
- 使用简单
- 安装简单
- 在 node 项目里质量偏高
- 插件齐全
咋安装
要在项目里面使用 gulp 须要安装两次, 先全局安装在本机上， 再安装在项目里面c++
不想看我唠叨，想直接安装的 直接看 总结。程序员
跳转到总结npm
安装 gulp 前的准备
安装 node&npm。教程不少， 我给一个还不错的
Node.js 安装配置json检查 node 有没有安装成功
node --versiongulp检查 npm 安装是否成功
npm -v
若是有版本号显出来就是安装成功了全局安装
npm下
先在机器上全局安装
npm install -g gulp
-g 是指全局安装
获得结果
经过查询版本看看安装是否是成功， 若是出现了版本号，那就是成功了
项目安装
gulp 毕竟是个 node 项目， 因此你的项目中 node 祖传的 package.json仍是应有的。
我知道也有和同样的node&前端新手， 因此就把 package.json 放上来咯。
package.json长的啥样呢 ，就是下面这个样子{ "name": "neptune", "version": "1.0.0", "description": "nothing", "main": "index.js", "scripts": { "test": "test" }, "author": "neptune", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-less": "^3.3.0" } }不要手动去填，node 祖传的神功大法， 咱们这是个自动化工具
部署 node 就一发
npm init
自动帮你写 package.json的而后，项目里面安装 gulp
npm install gulp -save-dev
安装完了 看看，你的项目package.json 多了"devDependencies": { "gulp": "^3.9.1", "gulp-less": "^3.3.0" }个人项目里面还有一个 gulp-less 插件， 也是安装成功了就天然跑进个人 依赖里面了。
有的小伙伴就看到本身的工程里面多了个 node_modules，对，那就是工程中安装 gulp 后生成的， 你装了插件，也会在这里面。好比我安装的这个 gulp-less 插件.
gulp目录下多了 package.json, 这个是 gulp 本身的. 上面咱们
mpn init是在本身的工程目录里面执行的。 生成的 package.json 也是咱们工程本身的, 就是用了 node,因此都上了node 的贼船的意思. 每一个工程都是有本身的 package.json的 。 你安装一个 gulp-less ，看看里面也是有一个 package.json的
开始编写自动化流程
在项目里面建立一个名为 gulpfile.js的文件
这个文件在我看来， 意义就和在c++项目里建立了一个 main.cpp 或者 python中main.py ,前端中 index.html同样。而里面的task就至关于一个个准备好被调用的函数， default就至关于main函数同样， 是系统默认的入口函数
总结
简单来讲， 你在项目安装 gulp 就须要作四个事情
1 安装 node&npm
Node.js 安装配置
2 全局安装 gulp
npm install -g gulp
3 工程初始化 and 安转 工程gulp
npm init
npm install gulp -save-dev
4 在你工程里面建立一个 名为 gulpfile.js 的文件, 开始写你的 gulp 自动化流程hello world
按照程序员的规定，上一门新的语言技术，先要来发 hello world
var gulp = require('gulp'); gulp.task('default',function(){ console.log('hello world'); });var gulp = require('gulp');
这句很简单易懂，就是导入 XX 包。
相似于
c/c++ 上的 #include “xxx”
python 上的 import xx
xx 语言上的 xx 程序员都懂的gulp.task 就至关于定义函数的关键字
default 就至关与 别的程序里面的 main 函数
function(){ console.log('hello world');就是一个匿名函数。是个被用烂的概念，就是一个触发回调，程序员都懂
咱们很容易就明白了。这个其实就是在 js 这个爸爸语言下实现的子语言。
咱们在脑壳里面构想一下。
程序运行起来，gulp把一大推task，放在一个 blueprint 上面。
系统在 blueprint 上找到入口函数，也就是 default 函数(就至关于 main 函数)
而后 gulp 的小火车就跑起来了。简单用
为了明白怎么写 gulp ，咱们要按部就班的来添加功能，我对上面的 helloworld 逐步的添加功能
var gulp = require('gulp'); gulp.task('_task_one', function () { console.log('HI, I am task one'); }); gulp.task('default',['_task_one'],function(){ console.log('hello world'); });依赖函数
上面看到咱们的 default的 task 多了一个参数，
这个参数咱们能够称呼为依赖函数。
什么意思呢，就是，咱们要执行 default 函数前，先的把依赖函数执行咯，咱们这个函数依赖的是_task_one函数,因此咱们在工程下 输入gulp命令， 执行起来会获得。[21:22:34] Using gulpfile ~/WebstormProjects/untitled/gulpfile.js [21:22:34] Starting '_task_one'... HI, I am task one [21:22:34] Finished '_task_one' after 129 μs [21:22:34] Starting 'default'... hello world [21:22:34] Finished 'default' after 57 μs
程序就是先执行完 _task_one 再跑的hello world 的。
好了有基础概念了， 咱们就开始干活把。 复杂的不能作，那就简单的。 要按部就班啊！
咱们合并点文件把。毕竟这对前端来讲，是再正常不过的了，有时候为了减小请求次数，减小这些没必要要网络损耗，咱们把这些零零碎碎的东西挤在一块儿。一次请求一个合并的 js 资源，至关于之前的几个 js 资源
gulp 插件使用
安装插件
上面我有个 less 的插件，他的安装和咱们安装 gulp 同样简单
好比 less 就是
npm install gulp-less
那么咱们的合并插件也是
npm install --save-dev gulp-concat
很是简单。
咱们去咱们的 package.json里面看看，能够看到依赖项多了咱们安装的"gulp-concat": "^2.6.1",
"devDependencies": { "gulp": "^3.9.1", "gulp-concat": "^2.6.1", "gulp-less": "^3.3.0" }咱们用合并插件写一个处理
var gulp = require('gulp'), concat = require('gulp-concat'); // 导入咱们的合并插件 gulp.task('default',function(){ gulp.src('testjs/*.js'). // 要处理的一堆 js 文件 pipe(concat('all.js')). // 用合并插件处理 pipe(gulp.dest('dist/')); // 把处理后的东西放进目标目录里面 });个人 testjs 目录下有个 test1.js 还有一个 test2.js

文件内容是这样的
好如今执行咱们的 gulp 命令

生成了一个 all.js，里面是咱们两个文件的合并确定有人疑惑了
var gulp = require('gulp'), concat = require('gulp-concat'); // 导入咱们的合并插件 gulp.task('default',function(){ gulp.src('testjs/*.js'). // 要处理的一堆 js 文件 pipe(concat('all.js')). // 用合并插件处理 pipe(gulp.dest('dist/')); // 把处理后的东西放进目标目录里面 });看到这里 你必定会疑惑gulp.src 还有 gulp.dest 是什么。 你已经理解了gulp 的task 的运做方式，那么你去 找找资料理解下gulp.dest和gulp.src 也就是分分钟的事情，咱们程序员，就是有力量！ 力量就来自咱们的学习方式。
这里我只说下 .pipe是个啥意思。
pipe 很好理解， 就是类 unix 系统上常用的管道么。
好比ls-l |grep "某某某"基本上是咱们用的最多的命令了，若是你会 类 unix 系统。你立刻就明白了。 这个 pipe 就至关于|这个管道符号若是不了解管道咋用的，我也简单的给说下。 就至关于把 pipe 命令前面程序输出 output 放在一个文件里面，再给 pipe 后面的那个命令 当作 输入 input 来用， 就是说
gulp.src('testjs/*.js')这个命令的输出是我 testjs 目录下的全部的 js 文件吧，pipe就把这些 js 所有放在一个文件里面，运行到pipe(concat('all.js')).这句的时候，咱们的concat('all.js')就从那个文件（其实就是一个匿名管道）里面读取（就是 input的过程）全部的 js 文件名字，当作本身input，而后合并成一个 all.js， 这是一种很是常见的进程间通信！还不会的要赶快学会啊。！好了，这个也很是简单。很快咱们就能触类旁通了吧
咱们已经合并了js 了，那还有性能优化的空间啊。 对咱们能够压缩他！开始触类旁通了！
咱们按照上面的步奏
1. 找到咱们须要的插件并安装
npm install --save-dev gulp-uglify
2. 添加压缩语句到 gulpfile.js 的代码中去var gulp = require('gulp'), concat = require('gulp-concat'), uglify = require('gulp-uglify'); gulp.task('default',function(){ gulp.src('testjs/*.js'). pipe(concat('all.js')). pipe(uglify()). pipe(gulp.dest('dist/')); });执行 gulp
获得结果
all.js已经被压缩在一块儿咯。
too easy！！！ 触类旁通的时刻就交给本身我的了。
总结
gulp 是一种很是容易学习和使用的工具，基本上拿在手上看一下就能直接拿来生产和使用。是每一个前端攻城狮均可以去尝试的居家旅行杀人越货必备良器！尚未用的赶快学一学！很是值得！
参考文档
- 1. gulp快速入门&初体验
- 2. javaWeb快速入门+——初体验-HelloWorld
- 3. Gulp 快速入门
- 4. gulp快速入门
- 5. gulp初体验
- 6. Gulp快速入门教程
- 7. Knative 初体验：CICD 极速入门
- 8. 快速入门kafka② kafka集群搭建(初级体验)
- 9. 20分钟gulp快速入门
- 10. Spring初学快速入门
- 更多相关文章...
- • SQL 快速参考 - SQL 教程
- • Eclipse 快速修复 - Eclipse 教程
- • YAML 入门教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. gulp快速入门&初体验
- 2. javaWeb快速入门+——初体验-HelloWorld
- 3. Gulp 快速入门
- 4. gulp快速入门
- 5. gulp初体验
- 6. Gulp快速入门教程
- 7. Knative 初体验：CICD 极速入门
- 8. 快速入门kafka② kafka集群搭建(初级体验)
- 9. 20分钟gulp快速入门
- 10. Spring初学快速入门