gulp是是前端開發(fā)對(duì)代碼進(jìn)行構(gòu)建的工具，是基于 Nodejs 的自動(dòng)任務(wù)運(yùn)行器，他能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測(cè)試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。在開發(fā)中使用能有效提高工作效率，使用：

　　既是基于Nodejs的任務(wù)運(yùn)行器，自然就需要先安裝Nodejs環(huán)境，以下便是安裝步驟：

　　安裝nodejs -> 全局安裝gulp -> 項(xiàng)目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運(yùn)行任務(wù)

　　1. 安裝 NodeJS 環(huán)境

　　到nodeJS官網(wǎng)選擇下載，運(yùn)行安裝包安裝即可。

　　2.初始化，生成package.json 文件：

　　在項(xiàng)目文件夾下打開命令提示符執(zhí)行下列命令(打開方式：shift+鼠標(biāo)右鍵，在此處打開明亮窗口)：

　　npm init

　　選裝 cnpm( npm淘寶鏡像 )：

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

　　3. 全局安裝 gulp

　　npm install gulp -g

　　全局安裝好后，可以在命令提示符下使用 gulp 的命令行工具(使用 gulp 命令)

　　gulp -v

　　**以上全局安裝一次即可**

　　4. 在項(xiàng)目目錄中生成 package.json 文件

　　npm init

　　使用默認(rèn)輸入，一路回車即可

　　或：npm init -y

　　5. 在項(xiàng)目本地安裝 gulp(安裝好后，在項(xiàng)目目錄下生成 node_modules 文件夾)

　　npm install gulp --save-dev

　　或

　　npm i gulp --save-dev

　　或

　　npm i gulp -D

　　6. 安裝 gulp 插件：

　　gulp-clean-css(壓縮CSS)

　　npm install gulp-clean-css -D

　　gulp-htmlmin(壓縮html)

　　npm i gulp-htmlmin -D

　　gulp-babel(將ES6的代碼轉(zhuǎn)換為ES5的代碼)

　　npm install gulp-babel babel-core babel-preset-env --save-dev

　　gulp-uglify(壓縮JS)

　　npm i gulp-uglify -D

　　gulp-rename(重命名)

　　npm i gulp-rename -D

　　gulp-imagemin(壓縮圖片)

　　gulp-concat(合并文件)

　　gulp-connect ( webserver 能夠部署靜態(tài)資源，能夠?qū)崿F(xiàn)瀏覽器自動(dòng)刷新--需要瀏覽器插件支持--livereload)

　　npm i gulp-connect(連接)

　　7. 在項(xiàng)目根目錄下，創(chuàng)建 gulpfile.js(固定名稱) 的文件：

　　**gulpfile.js：**

　　//引入模塊

　　const gulp = require("gulp"),

　　connect = require("gulp-connect"),

　　sass = require("gulp-sass");

　　//定制，啟動(dòng)服務(wù)器

　　gulp.task("connect",function(){

　　connect.server({

　　root:"dist",//webserver的根目錄

　　livereload:true//瀏覽器自動(dòng)刷新

　　});

　　});

　　//復(fù)制HTML文件到dist目錄下，讓HTML頁面重新加載

　　gulp.task("html",function(){

　　gulp.src("src/**/*.html")

　　.pipe(gulp.dest("dist"))

　　.pipe(connect.reload());

　　});

　　//復(fù)制js文件到dist目錄下,js重新加載

　　gulp.task("js",function(){

　　gulp.src("src/js/**/*.js")

　　.pipe(gulp.dest("dist/js"))

　　.pipe(connect.reload());//瀏覽器自動(dòng)刷新

　　});

　　//復(fù)制lib目錄到dist下

　　gulp.task("copy-lib",function(){

　　gulp.src("src/lib/**/*.*")

　　.pipe(gulp.dest("dist/lib"))

　　});

　　//復(fù)制img目錄到dist下

　　gulp.task("copy-img",function(){

　　gulp.src("src/img/**/*.*")

　　.pipe(gulp.dest("dist/img"))

　　});

　　//復(fù)制mock目錄到dist下

　　gulp.task("copy-mock",function(){

　　gulp.src("src/mock/**/*.*")

　　.pipe(gulp.dest("dist/mock"))

　　});

　　gulp.task("copy",["copy-lib","copy-img","copy-mock"])

　　//編譯*.scss文件為*.css

　　gulp.task("sass",function(){

　　gulp.src("src/sass/*.scss")

　　.pipe(sass({outputStyle:"compressed"}))

　　.pipe(gulp.dest("dist/css"))

　　.pipe(connect.reload());

　　})

　　//監(jiān)視文件的修改

　　gulp.task("watch",function(){

　　gulp.watch("src/sass/*.scss",["sass"]);

　　gulp.watch("src/**/*.html",["html"]);

　　gulp.watch("src/js/**/*.js",["js"]);

　　});

　　//定制默認(rèn)(缺省)任務(wù)

　　gulp.task("default",["html","js","sass","copy","connect","watch"])

　　8. 在命令行中執(zhí)行任務(wù)：

　　gulp 任務(wù)名稱

　　或 gulp

　　9.本地訪問localhost或本機(jī)IP即可運(yùn)行項(xiàng)目

　　Gulp運(yùn)行成功結(jié)果如下：

　　本內(nèi)容由千鋒成都web前端培訓(xùn)學(xué)員分享，學(xué)習(xí)web前端，可以參考千鋒提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開發(fā)工程師，web前端高級(jí)開發(fā)工程師，后面的web前端大神級(jí)開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開發(fā)需要掌握的知識(shí)有個(gè)清晰的了解，并快速入門web前端開發(fā)。

上一篇

參加成都HTML5開發(fā)培訓(xùn)怎么樣

下一篇

千鋒成都web前端培訓(xùn)學(xué)員分享：解析左右滑動(dòng)輪播圖