gulp入门教程

提示 ：码云有gulp的例子

gulp是什么？

在前端开发中，你是否有遇到以下这些问题？

1、需要手动合并雪碧图

2、需要手动压缩js、css

3、每次编写完代码后，需要手动刷新浏览器看效果

4、手动压缩图片

......

gulp的主要作用就是帮助我们自动完成上面的那些繁琐的工作。

安装gulp

gulp是基于node.js的，所以你需要先安装node.js。安装完node后，打开命令窗口，输入 npm install gulp -g。如下图 ：(提示 ： -g代表全局安装)

安装若成功后，输入gulp -v 可以查看gulp版本

hello world

下面我们用一个hello world的程序，来演示下如何使用gulp

1、在项目目录下，安装gulp

2、在项目目录下，新建一个gulpfile.js的文件，需要注意的是这里的名字一定要是gulpfile，不能是其它的。

3、编写gulpfile.js，如下 ：

const gulp = require('gulp');
 
gulp.task('hello', function(){
	console.log('hello world');
})

4、在项目目录下，打开命令窗口运行gulp命令 ： gulp hello 。如下 ：

让我们来分析下上面的代码  :

const gulp = require('gulp');  引入gulp，require是node.js引入库的写法

gulp.task('hello', function(){

console.log('hello world');

});

gulp下有个task方法，这个方法用来定义gulp任务。第一个参数是任务的名字，第二个参数是一个回调函数，即运行了这个任务后，我们要干什么。这里我们只是很简单的console.log

gulp的5大函数

实际上gulp并没有太多的功能。其它功能都是使用第三方的插件来完成。比如上面的说的压缩图片的功能就要使用一个叫imagemin的插件来完成。gulp的常用函数有5个，分别是 ：

task：起任务用的

src：读取文件

dest：输出文件

watch：监听文件，若文件发生变化则去处理一些逻辑

pipe：可以理解为一个功能管道

一般使用gulp的流程是这样的 ：

gulp.task('任务名字', function(){
	return gulp.src('读取要处理的文件')
		.pipe('第三方插件')
		.pipe(gulp.dest('输出文件'));
});

下面我们来举个实际点的例子

复制文件

gulp.task('copy', function(){
	return gulp.src('index.html')
		.pipe(gulp.dest('dist'));
});

这个例子首先任务名字是copy，然后我们使用src方法去读取index.html这个文件，最后我们使用dest输出这个文件到一个名为dist的文件夹下。

常用的gulp插件

gulp-connect：一个本地的服务器
gulp-uglify：压缩js

gulp-minify-css：压缩css

gulp-imagemin：压缩图片

gulp-css-spriter：合并精灵图

例子 ：

let gulp = require('gulp');
let spriter = require('gulp-css-spriter');
 
gulp.task('css', function() {
    return gulp.src('./css/style.css')//比如recharge.css这个样式里面什么都不用改，是你想要合并的图就要引用这个样式。 很重要 注意(recharge.css)这个是我的项目。别傻到家抄我一样的。
        .pipe(spriter({
            // The path and file name of where we will save the sprite sheet
            'spriteSheet': './dist/images/spritesheet.png', //这是雪碧图自动合成的图。 很重要
            // Because we don't know where you will end up saving the CSS file at this point in the pipe,
            // we need a litle help identifying where it will be.
            'pathToSpriteSheetFromCSS': '../images/spritesheet.png' //这是在css引用的图片路径，很重要
        }))
        .pipe(gulp.dest('./dist/css')); //最后生成出来
});

如何使用gulp插件？

1、打开 https://www.npmjs.com/ ，在搜索栏中输入你想查询的gulp插件。这里我们以gulp-connect为例，如下图 ：

2、搜索到该插件后，在下面会看到具体的使用方法

安装方法

使用案例

可以看到第一步是引入gulp-connect插件，第二步是使用server这个方法来建立一个服务器。其它插件的使用步骤都是大同小异，这里就不在一一介绍其它插件怎么使用了。

watch函数

watch函数的作用上面已经介绍过了，下面让我们来具体写个例子了解下。这个例子是这样的，当文件发生改变时，自动刷新浏览器。

这个例子需要用到的插件是gulp-connect

const gulp = require('gulp');
const connect = require('gulp-connect');
 
gulp.task('server', function(){
	connect.server({
		root : './',    //项目目录
		livereload: true  //这里要为true，文件发生改变时才会刷新浏览器
	});
	gulp.watch('index.html', function(){
		return gulp.src('index.html').pipe(connect.reload());  //使用watch监听index.html，当发生改变时，调用reload函数刷新浏览器
	});
});