gulp入门学习教程（入门学习记录）

2018-06-24 01:34:44来源：未知阅读 ()

前言

　　最近在通过教学视频学习angularjs，其中有gulp的教学部分，对其的介绍为可以对文件进行合并，压缩，格式化，监听，测试，检查等操作时，看到前三种功能我的心理思想是，网上有很多在线压缩，在线解压，css格式化，js格式化类似的工具，为什么还需要学习一项新技术呢。当学完了之后，被自己见识短浅而羞愧。

1 gulp的优点

　　在做一个项目是，如果这个项目比较大，文件比较多，那这些文件的合并，压缩，格式化，监听，测试，检查等操作该怎么完成呢？如果像上面我所说的那样通过一些在线功能进行操作的话，任务量比较大，而且当我们对多个文件进行改动的话，又得重新一个个的手动在线压缩等操作，显然不是很高效，那么此时gulp就能帮我们高效的完成这些工作。反正当我学完了之后有一种近视眼带上了眼镜的感觉（哈哈，这个比喻不知道有没有人能领悟到是什么感觉）。

　　类似于gulp，还有grunt，因为我只学过gulp，而且在github上gulp的使用更多，所以我选择这个，具体用哪个，各凭喜好。

2 安装gulp

　　首先应确保已经安装了nodejs环境和npm（检验是否安装的方法:node -v,npm -v）。然后以全局的方式安装gulp

　　　　npm gulp -g 安装完成后可以通过gulp -v 检验是否安装成功及gulp的版本号

　　　　-g global 全局安装

　　　　--save将配置信息保存在package.json中（package.json在项目的根目录中），这样做的一个好处是，别人拿到这个项目即使没有node_modules文件夹时，只要在命令行输入 npm install name项目所需要的插件都会被下载下来

　　　　-dev 保存至package.json的devDependencies节点，不指定的话保存至dependencies节点

3 如何在项目中使用gulp

新建一个项目目录：demo_gulp
在这个目录下本地安装gulp npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev： npm install --save-dev gulp 为什么要安装两次，点这里
新建package.json配置文件：npm init：

　　　红色的框是npm init后需要填写的配置信息如果默认，按回车即可，蓝色的框是，配置完成后的确认信息

　　　配置完成后，在根目录下会自动新建一个package.json的文件,文件的信息就是配置文件时填写的信息

　　4.在根目录新建gulpfile.js文件，将以下代码复制到gulpfile.ls中

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

　　在命令行中输入 gulp default,输出如下图：

　　到这里就已经实现了gulp的一个简单的应用，

4.gulp的4个属性 src，dest , watch , task

　　gulp.task(task_name,fn) 定义一个任务，在命令行中执行这个任务，如上面输出“hello gulp”的代码就是一个名为“default”的任务

　　gulp.src('XX/XX/XX.js/css/less/...') 匹配文件并输出。括号里面的参数可以是文件的路径，也可以是文件路径组成的数组

　　gulp.dest() 将传入的文件写进来，如果文件夹不存在会自动创建文件夹

　　gulp.watch('XX/XX/XX.js/css/less/...',[task_name]) 监听文件；第一个参数可以是某一个文件，也可以是多个文件组成的数组，第二个参数是多个任务的名字组成的数组

　　pipe（）字面意思：管道；此方法是把一个文件流输入，通过pipe管道输出（下一个处理程序可以把上一级输出的流文件当做输入）

　　下面这个例子是将src文件夹下面的demo.css复制到src 文件夹下面的style文件夹下面的css文件夹下，代码写好后在命令行执行 gulp copy任务即可，如下图命令行截图

gulp.task('copy',function(){
	gulp.src('./src/demo.css')  //匹配src文件夹下的demo.css文件并输出
		.pipe(gulp.dest('./src/style/css'));
});

　　下面是文件监听的代码和命令行截图：

gulp.task('watch',function(){
	gulp.watch('./src/demo.css',['copy']);
})

　　当src文件下的demo.css发生改变时，就会执行copy任务，如下图，每一次对src下面的demo.css的改变进行保存操作，，命令行都会自动的执行copy任务

5.gulp的一些常用插件

　　gulp的属性就只有以上四个，name文件的合并，压缩，格式化等等这些处理都有gulp的插件来完成，刚好看了一篇博客，我觉得他已经讲得挺详细的了，够新手入门了，我在这里只做一个简单的例子

　　css的压缩

　　首先要下载gulp-caanano的插件，在命令行输入npm install gulp-cssnano --save-dev ;然后再gulpfile.js中输入以下代码：

var cssnano = require('gulp-cssnano');

gulp.src('.src/demo.css')
    .pipe(cssnano())  //压缩demo.css文件
    .pipe(gulp.dest('./src/style/css'))

　　对src下的demo.css的修改完成并保存后，再在命令行执行任务gulp watch，即可自动化的完成css的压缩。

　　最后在记录一个浏览器自动化的例子

　　下载browser-sync插件，操作同上面相同，npm install browser-sync --save-dev,然后将下面的代码复制到gulpfile.js中

// 浏览器自动化
var browserSync=require('browser-sync').create();
gulp.task('serve',function(){
	browserSync.init({
		server:{
			baseDir:'./'  //以package.json为同一目录
		}
	})
})

　　再执行serve任务，如下图地址 http://localhost:3001 是设置自动化的设置，地址 http://localhost:3000/src/index.html是我的网页地址，当在不同的浏览器同时打开这个网页，或者在同一浏览器不同窗口打开这一个网页，对其中一个网页操作（如input的输入，页面的滚动），另一个网页也会进行同样的操作；对css文件改变后进行保存操作，网页立刻会做出改变，不用再手动刷新，等等还有其他功能，完成了网页的自动化，大大的提高了工作效率。