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