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 入门教程