前端自動化構建工具 Gulp 使用

一個月沒寫博客了，今天有時間，就寫個gulp的入門使用吧。。

簡介：gulp是一個前端自動化構建工具，能夠實現代碼的檢查、壓縮、合併……等等，gulp是基於Node.js的自動任務運行器

1、安裝Node

　　去Node官網下載安裝，因爲5.0版本的改變比較大，下載4.2.2穩定版便可

　　如下操做都是在命令行環境中執行：

node -v        //可查看安裝Node的版本號，有即爲安裝成功

2、經過npm安裝Gulp

 　　npm（node package manager）nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）；

npm install -g gulp         //-g 是全局(global)安裝，在任何目錄下均可以使用

gulp -v                     //可查看安裝gulp的版本，有即爲安裝成功

3、在項目中使用Gulp完成自動化構建

　　經過命令行進入你的項目目錄，cd 命令就能夠，如今個人項目根目錄是 C:\gulpdemo\

　　注: 由於在向項目中安裝gulp的時候，項目名會直接默認你的文件夾的名字命名爲項目名，

　　　　因此在建立項目文件夾時命名不要使用關鍵字相似gulp以及模塊名等。

　　一、初始化項目

// 當前目錄：C:\gulpdemo\
npm init　　　　　　　　    // 經過這個命令初始化項目，中間會要求設置幾個基本設置，不須要直接回車便可

　初始化以後會在項目根目錄出現  package.json 文件

　npm在package.json文件中管理項目的依賴項以及項目的元數據。node執行js中require的時候，也會根據package.json中的依賴項查找。

　　二、在項目中安裝gulp以及一系列須要用到的gulp插件

npm install gulp --save-dev              //--save-dev的做用是讓gulp依賴進項目中，在package.json中記錄起來

npm install gulp-less --save-dev         //gulp-less插件，用於將less樣式編譯爲css樣式文件，至關於koala的less編譯

npm install gulp-uglify --save-dev       //gulp-uglify插件，用於對js文件進行壓縮操做

npm install gulp-minify-css --save-dev   //gulp-minify-css插件，用於對css樣式進行壓縮操做

npm install gulp-imagemin --save-dev     //這兩個插件用於圖片的無損壓縮
npm install imagemin-pngquant --save-dev

npm install gulp-livereload --save-dev   //自動刷新頁面，媽媽不再用擔憂 F5 被按壞了

　　三、在根目錄中新建 gulpfile.js 文件

 　以less編譯插件爲例：

//加載模塊
var gulp = require("gulp");
var less = require("gulp-less");
//less編譯
gulp.task("less", function(){
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

gulp less                        //進入項目根目錄運行命令便可啓動任務操做

　　項目代碼放在 C:\gulpdemo\src\ 裏面，代碼檢查壓縮處理以後自動存在 C:\gulpdemo\dist\ 裏做爲發佈代碼

　●  我寫好的gulpfile.js文件包括上面的壓縮功能，能夠根據須要的功能尋找gulp插件進行拓展，要的人多就放上來，比較簡單，少的話就不放了

代碼地址 go go go

 轉載請註明： http://www.cnblogs.com/zhangmingze/p/4953704.html