gulp 入门

发表于   |   分类于   |     |   阅读次数

项目的性能优化迫在眉睫了，图片/js/css/的压缩合并势在必行，一直知道这是一个优化点却从未去做。新需求，总会有形无形地促使人去学习新知识以完成任务。gulp ,这么神奇好玩的东西，赶紧搞起来！

gulp初识

是啥？能啥？

基于 node.js ，是前端开发过程中的一种代码构建工具，自动化项目的构建利器。
基于流，管道 pipe思想；前一级的输出、直接变成后一级的输入，简化操作。
能自动化地完成：

  • 文件合并 gulp-concat
  • 文本拷贝 gulp-copy
  • 文本替换 gulp-replace
  • 图片压缩 gulp-imagemin
  • css 压缩 gulp-cssmin
  • js 压缩 gulp-uglify

安装 gulp

前提，安装好 node.js 。
全局方式安装 gulp :

1
npm install -g gulp

全局安装后，还必须在要使用 gulp 的项目中再单独安装一次；切换至项目文件夹位置，进行安装：

1
npm install gulp

一般地，安装时需要把 gulp 写进项目 package.json 文件的依赖话，加上 --save-dev ：

1
npm install --save-dev gulp

这样，就可以在该项目中应用 gulp 了。比如，我在文件夹 gulp_test1 下的 git bash 命令中安装完后，就会自动生成 node_modules 目录结构。

gulp开始使用

新建 gulpfile.js 文件：
在文件夹 gulp_test1 下，新建 gulpfile.js 文件，打开该文件编辑、输入以下代码（定义任务）：

1
2
3
4
var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

这时，完整的目录结构是这样的：
gulp 目录结构

最后，在存放 gulpfile.js 的文件夹下（即 node_modules 下），通过命令行执行，成功结果如下：

1
2
3
4
5
6
guojc@LAPTOP-LJ1HC4HN /F/GulpProjects/gulp_test1/node_modules
$ gulp
[21:25:50] Using gulpfile f:\GulpProjects\gulp_test1\node_modules\gulpfile.js
[21:25:50] Starting 'default'...
hello world
[21:25:50] Finished 'default' after 148 μs

‘gulp task1’ gulp + 任务名，即为执行该指定任务；只有 gulp ，则默认执行名为 `default 的任务。