gulp 前端自动化工具

一开篇

在前端开发的过程中，我们经常会碰到压缩、合并、图片script 等，于是就有了gulp 前端自动化构建工具，它能帮你在前端开发中，节省时间。

1，安装 node.js

因为gulp 构建工具是基于node环境的，那么什么是 node.js呢，下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

用自己的话，node.js 就是一个运行js的环境，谷歌浏览器就是 V8 引擎

百度搜索node.js ，进入中文官网下载，它会自动识别电脑系统，如果下载不了，请自行解决

然后打开cmd 命令行 执行

node -v

 查看 node 是否安装成功

2，npm  包管理器

安装 node 后，默认就安装了 包管理器，但是在很久之前都是单独安装的 ，可见它的发展，这个在以后我们会经常用到

因为 墙的原因，我们需要将安装cnpm ，以后 使用npm的地方，都用cnpm来代替，感谢淘宝

npm install -g cnpm --registry=https://registry.npm.taobao.org

 然后 使用 npm -v 检查 npm 是否安装成功

cnpm -v 检查cnpm 是否安装成功

 

3，gulp 自动化构建工具

先来个官网地址：http://www.gulpjs.com.cn/

安装 gulp

cnpm install gulp -g

 检查 gulp 是否安装成功， gulp -v

安装gulp成功后，我们使用 gulp 压缩、合并文件

（1） 创建一个文件夹

（2）package.json 文件

很多人看到这个文件就晕了，干什么的啊，我第一次看到这个也晕了，先不用管他，就是一个配置文件，打开cmd命令行，进入你创建的文件夹，下面我们使用 cnpm init 创建配置文件，一路回车，不用管它，现在看你新创建的文件夹下面是不是有一个 package.json 文件。

为了正常使用，我们要在本地安装gulp：

cnpm install gulp --save-dev

 你会发现我安装了两次 gulp，全局安装是为了执行gulp任务，本地安装是为了调用gulp插件的功能

这个时候你会在 你新建的文件夹下，发现一个 node_modules 文件

（3）安装 插件

因为 gulp 本身是不含 压缩、合并等功能的，下面我们需要安装 gulp 插件

1.css压缩 　　gulp-minify-css

2.js压缩　　　gulp-uglify

3.js合并　　　gulp-concat　　

 

由于压缩之前需要对js代码进行代码检测，压缩完成之后需要加上min的后缀，我们还需要安装另外两个插件：

4.重命名　　   gulp-rename

5.js代码检测　 gulp-jshint　(或gulp-jslint)

(更多插件可以查看 http://gulpjs.com/plugins/ )

在项目根目录下执行以下命令（安装上面需要的插件）：

npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev

 安装好的插件会出现在上面提到的node_modules文件夹中。

（4）使用 gulp

现在可以使用gulp了，在项目根目录下创建 gulpfile.js ，这不就是js文件么？是的

var gulp = require('gulp'),
	minifycss = require('gulp-minify-css'),	// reqire 加载插件
	concat = require('gulp-concat'),
	uglify = require('gulp-uglify'),
	rename = require('gulp-rename'),
	jshint = require('gulp-jshint');

	// 语法检查
	gulp.task('jshint',function(){		// gulp.task方法用来定义任务，第一个参数是任务名，第二个是执行函数
		return gulp.src('js/*.js')		// 需要操作的文件
			.pipe(jshint())
			.pipe(jshint.reporter('default'));
	});

	// 压缩css
	gulp.task('minifycss',function(){
		return gulp.src('css/*.css')
			.pipe(concat('all.css'))		// 压缩后的文件名
			.pipe(rename({suffix: '.min'}))	// rename 压缩后的文件
			.pipe(minifycss())				// 执行压缩
			.pipe(gulp.dest('css'));		// 用来写文件的，文件路径
	});

	// 压缩、合并js
	gulp.task('minifyjs',function(){
		return gulp.src('js/*.js')
			.pipe(concat('main.js'))
			.pipe(gulp.dest('js'))
			.pipe(rename({suffix: '.min'}))
			.pipe(uglify())				// 压缩
			.pipe(gulp.dest('js'));
	});

	// 在cmd中输入gulp，执行的就是这个任务，压缩js需要在检查js之后操作
	gulp.task('default',['jshint'],function(){
		gulp.start('minifycss','minifyjs');
	});

 你把上面的文件复制到 gulpfile.js 中，然后再cmd命令行，执行gulp

这个时候就执行完成了，你去css 和 js 文件中就能看到压缩的文件了

上面红线标出的 errors 是因为在压缩前，检查js语法，上面的提示就是js语法错误，这个提示有可能不准确，你还是去看一看吧。

 

参考文章：

gulp详细入门教程

gulp完成javascript压缩 合并

gulp教程之gulp API

gulp 自动化构建工具

 gulp 入门教程