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

前言

　　最近在经过教学视频学习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

1. 新建一个项目目录：demo_gulp
2. 在这个目录下本地安装gulp  npm install gulp  若是想在安装的时候把gulp写进项目package.json文件的依赖中，则能够加上--save-dev： npm install --save-dev gulp  为何要安装两次，点这里
3. 新建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文件改变后进行保存操做，网页马上会作出改变，不用再手动刷新，等等还有其余功能，完成了网页的自动化，大大的提升了工做效率。

　　

　　至于其余的插件，我在上面有一个推荐的博客连接，讲的挺好的了，能够直接的移步哪里。