Gulp組件化構建項目

1、Gulp簡介

gulp是前端開發過程當中對代碼進行構建的工具，基於Nodejs的自動任務運行器，對文件進行檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，大大提升咱們的工做效率。

2、步驟：

大致的步驟以下：安裝gulp-->相關插件的安裝-->構建項目-->運行並查看效果

1. 安裝gulp

1.1. 安裝Nodejs：

安裝完後打開命令窗口輸入node -v就能查看nodejs是否安裝成成功

1.2 選裝cnpm:

因npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，安裝淘寶鏡像 找到Node.js 文檔鏡像:

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

npm install

注：cnpm跟npm用法同樣，在執行命令時將npm改成cnpm便可

1.3 gulp安裝

全局安裝：

npm install -g gulp

全局安裝後，還需在每一個項目中單獨安裝一次 npm install gulp

注意：把gulp寫進項目package.json文件的依賴中則加上--save-dev

2. 相關插件的安裝

2.1 常見插件

autoprefixer   //自動添加css前綴 gulp-clean //清空文件夾 gulp-concat //合併文件 gulp-notify //更改提醒 gulp-rename //改變文件名 gulp-less //將less編譯成css文件 gulp-uglify //壓縮js gulp-jshint //js代碼校驗 gulp-minify-css //壓縮css gulp-livereload //自動刷新頁面

注：快速安裝這些插件的命令：

$ npm install autoprefixer gulp-clean gulp-concat gulp-notify gulp-rename gulp-less gulp-uglify gulp-jshint gulp-minify-css gulp-livereload --save-dev

2.2 構建項目

2.2.1 在構建項目以前，須要先了解幾個gulp命令

1）定義任務：gulp.task(name[,deps],fn) name 任務名稱 deps:依賴任務名稱 fn:回調函數 2）gulp.watch(glob,fn) 當glob內容發生變化時，執行fn 3) gulp.src(path) 需處理的源文件路徑，多文件時能夠是數組或正則的形式 4）gulp.dest(path) 編譯後生成文件的路徑

2.2.2 在根目錄新建一個gulpfile.js文件，引用插件

//例如引用gulp和gulp-clean插件 var gulp =require('gulp'); var clean = require(gulp-clean); //清空目錄 gulp.task(clean,function(){ return gulp.src([ paths.app.root ]) .pipe(clean()) .pipe(notify('文件已清空!') });

2.2.3 完整的gulpfile.js

'use strict'; //js嚴格模式 //引入插件 var gulp = require('gulp'), less = require('gulp-less'), cssnano = require('gulp-cssnano'), cssBase64 = require('gulp-css-base64'), clean = require('gulp-clean'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), autoprefixer = require('gulp-autoprefixer'), nunjucksRender = require('gulp-nunjucks-render'), notify = require("gulp-notify"), browserSync = require('browser-sync').create(), reload = browserSync.reload; // 環境變量 var paths = { root: "./", src: { root: "src/", less: "src/less/", js: "src/js/", images: "src/images/", templates: "src/templates/", pages: "src/pages/", css: "src/css/", fonts: "src/fonts/" }, app: { root: "app/", css: "app/css/", images: "app/images/", js: "app/js/", fonts: "app/fonts/" } }; // 默認任務 gulp.task('default', ['clean', 'styles', 'scripts', 'assets', 'layouts']); // 清空目錄 gulp.task('clean', function () { return gulp.src([ paths.app.root ]) .pipe(clean()) .pipe(notify("文件已清空.")) }); // 樣式文件構建 gulp.task('styles', function () { gulp.src( [paths.src.less + 'style.less'] ) .pipe(less()) .pipe(autoprefixer({ browsers: ['last 30 versions'] //['chrome 32'] })) .pipe(cssBase64({ extensionsAllowed: ['.gif', '.png', '.svg'] })) .pipe(gulp.dest(paths.app.css)) .pipe(cssnano()) .pipe(rename("style.min.css")) .pipe(gulp.dest(paths.app.css)) .pipe(notify("styles合併完成.")) .pipe(reload({stream: true})); }); // 腳本構建 gulp.task('scripts', function () { return gulp.src(paths.src.js + 'custom.js') .pipe(gulp.dest(paths.app.js)) .pipe(uglify()) .pipe(rename("custom.min.js")) .pipe(gulp.dest(paths.app.js)) .pipe(notify("scripts合併完成.")); }); gulp.task('assets', function () { gulp.src(paths.src.js + 'vendors/**/*') .pipe(gulp.dest(paths.app.js)); gulp.src(paths.src.fonts + '**/*') .pipe(gulp.dest(paths.app.fonts)); gulp.src(paths.src.css + '**/*') .pipe(gulp.dest(paths.app.css)); gulp.src(paths.src.images + '**/*') .pipe(gulp.dest(paths.app.images)); }); //頁面構建 gulp.task('layouts', function () { return gulp.src( paths.src.pages + '**/*.html') .pipe(nunjucksRender({ path: [paths.src.templates] // String or Array })) .pipe(gulp.dest(paths.app.root)) .pipe(notify("頁面渲染完成.")); }); gulp.task('js-watch', ['scripts'], reload); gulp.task('js-layouts', ['layouts'], reload); // 即時服務器 gulp.task('serve', function () { browserSync.init({ server: { baseDir: paths.app.root } }); gulp.watch([paths.src.less + '**/*.less'], ['styles']).on('change', browserSync.reload); gulp.watch([paths.src.js+ '**/*.js'], ['js-watch']).on('change', browserSync.reload); gulp.watch([paths.src.pages + '**/*.html', paths.src.templates + '**/*.html'], ['js-layouts']).on('change', browserSync.reload); });

2.3 項目目錄結構示意圖

project(項目名稱)
|–.git 經過git管理項目會生成這個文件夾 |–node_modules 組件目錄 |–app 發佈環境 |–css 樣式文件(包括style.css style.min.css) |–images 圖片文件(已壓縮的圖片) |–js js文件(包括custom.js custom.min.js) |–index.html 靜態文件 |–src 生產環境 |–less less |–images 圖片文件 |–js js文件 |–pages 靜態html文件 |–templates (包括master.html) |–gulpfile.js gulp任務文件 |–package.json json文件

注：進入文件目錄後可經過命令快速建目錄

mkdir app/ app/less app/images app/pages app/templates