gulpjs.png
本人一直開發iOS，現在屬于前端菜鳥。這也只是一片總結筆記，文中有錯誤歡迎糾正
這篇文章以新建一個移動端web項目為例
為什么要使用node的構建工具
一句話：自動化。對于需要反復重復的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。只需要在配置文件（這里指gulpfile.js）正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工作
為什么選擇gulp
開始
安裝gulp
檢查npm版本：
npm -v
這里使用mac開發,npm版本3.10.10 ，node跟NPM做開發的基本都是有安裝，沒有的話出門右轉百度全局安裝 gulp：
npm install --global gulp查看gulp版本：
gulp -v首先以需要有項目，大概是這樣
|____dist
| |____img
|____src
| |____css
| |____img
| |____index.html
| |____js
| |____stylus
新建package.json, 然后會讓你鍵入些author，license，description等，這個自行填寫就行
cd ProjecPathyourProjecPath為你項目的絕對路徑
npm init安裝gulp及常用插件
npm install --save-dev gulp browser-sync gulp-autoprefixer gulp-clean-css gulp-stylus gulp-concat gulp-uglify gulp-htmlmin gulp-rev gulp-rev-collector gulp-imagemin imagemin-pngquant gulp-clean run-sequence del vinyl-paths
執行上面這條命令后會安裝以下插件（這里再安利一個插件gulp-file-include）
var gulp = require('gulp');
/*引入gulp及相關插件 require('node_modules里對應模塊')*/
// css js html
var stylus = require('gulp-stylus'); //編譯stylus
var cleanCss = require('gulp-clean-css'); // 壓縮css
var autoprefixer = require('gulp-autoprefixer');// css前綴
var uglify = require('gulp-uglify'); //壓縮JS
var htmlmin = require('gulp-htmlmin'); //壓縮html
var rev = require('gulp-rev'); // 給文件加入版本號
var revCollector = require('gulp-rev-collector'); // 替換html中的文件名
var concat = require('gulp-concat'); // 合并
var browserSync = require('browser-sync').create(); // 瀏覽器運行
var clean = require('gulp-clean'); //清空文件夾，避免文件冗余
var runSequence = require('run-sequence'); //執行順序，避免
const imagemin = require('gulp-imagemin'); // 壓縮圖片
const pngquant = require('imagemin-pngquant');
var del = require('del'); // 下面兩個就是在管道中 進行文件刪除操作
var vinylPaths = require('vinyl-paths');
- 新建gulpfile.js文件用于配制
touch gulpfile.js
這里僅是一個stylus的編譯示例使用gulp構建項目最重要的工作就是編寫gulpfile.js配置文件
var gulp = require('gulp');
var stylus = require('gulp-stylus'); //編譯stylus
var autoprefixer = require('gulp-autoprefixer');// css前綴
const SRC = './src/'
const SRC_CSS = SRC + 'css'
const SRC_STYLUS = SRC + 'stylus'
const SRC_STYLUS_ALL = SRC_STYLUS + '/**/*.styl'
// ======================================================css
gulp.task('compile-stylus', function() {
return gulp.src(SRC_STYLUS_ALL)
.pipe(stylus({
compress: false
}))
.pipe(autoprefixer({ // 支持到IE9
browsers: 'last 3 versions'
}))
.pipe(gulp.dest(SRC_CSS))
});
- gulp使用管道的方式對文件進行處理，每個task都需要有src輸入文件(目錄)和對應的輸出dest
所以對于構建項目結構一般將src，dist構建為獨立的兩個目錄，所以最后目錄大概是這樣
.
|____dist
| |____img
|____gulpfile.js
|____json
| |____css
| |____js
|____package.json
|____src
| |____css
| |____img
| |____index.html
| |____js
| | |____index.js
| | |____jquery-1.11.3.min.js
| |____stylus
| | |____layout.styl
| | |____reset.styl
步驟大概就是這樣，查看demo
