（1）新建項目目錄gulp_web
（2）項目目錄下建目錄src里面存放需要進行gulp處理的文件目錄及文件
（3）gulpfile.js文件內容為聲明需要打包應用的gulp組件及打包文件路徑和打包任務，比如：
// 引入 gulp var gulp = require('gulp'); // 引入組件 var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); // 檢查腳本 gulp.task('lint', function() { gulp.src('src/js/*.js') //該任務針對的文件 .pipe(jshint()) //該任務調用的模塊 .pipe(jshint.reporter('default')); }); // 編譯Sass gulp.task('less', function() { gulp.src('src/less/*.less') .pipe(less()) .pipe(gulp.dest('./dist/css')); }); // 合並，壓縮文件 gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); // 默認任務 gulp.task('fx_web', function(){ gulp.run('lint', 'less', 'scripts'); // 監聽js文件變化 gulp.watch('src/js/*.js', function(){ gulp.run('lint', 'less', 'scripts'); }); // 監聽less文件變化 gulp.watch('src/less/*.less', function(){ gulp.run('lint', 'less', 'scripts'); }); });
（4）在安裝部署nodejs環境前提下，進入cmd命令行執行到項目根目錄：f:\gulp_web>
（5）f:\gulp_web>npm init 一路enter鍵初始化打包信息，生成package.json文件，內容如：
{ "name": "gulp_web", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
（6）f:\gulp_web>npm install --save-dev gulp 執行安裝gulp組件，結果會在項目根目錄生成node_modules目錄。
注意gulp的安裝包括全局安裝和項目目錄安裝：
在系統管理員cmd默認路徑下全局安裝請輸入
npm install -g gulp 在項目目錄安裝請輸入 npm install --save-dev gulp
（7）根據上面gulpfile.js文件中所應用的聲明組件：
// 引入組件 var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');
按需安裝組件，如下：
npm install --save-dev jshint gulp-jshint
npm install --save-dev less gulp-less
npm install --save-dev concat gulp-concat
npm install --save-dev uglify gulp-uglify
npm install --save-dev rename gulp-rename
(8)以上組件全部安裝完成后，f:\gulp_web>gulp fx_web 執行打包任務，在gulpfile.jf文件中聲明：
// 默認任務 gulp.task('fx_web', function(){ gulp.run('lint', 'less', 'scripts'); // 監聽js文件變化 gulp.watch('src/js/*.js', function(){ gulp.run('lint', 'less', 'scripts'); }); // 監聽less文件變化 gulp.watch('src/less/*.less', function(){ gulp.run('lint', 'less', 'scripts'); }); });
（9）如果上面任務執行順利，會出現如下畫面，並在根目錄生成目錄dist存放gulp處理過后的文件及目錄。
最后gulp自動化構建成功。
下面摘錄其他網友的gulp組件說明：
必備插件
gulp-htmlmin 看到名字就能知道，這個插件是用來壓縮 HTML。PS：注釋啥的都可以去掉哦，看文檔get更多技能哈
gulp-imagemin 除了能壓縮常見的圖片格式，還能壓縮 SVG，叼叼的~
gulp-clean-css 壓縮 CSS。我原本推薦的是 gulp-minify-css，結果其首頁中已建議改用gulp-clean-css...
gulp-uglify 專業壓縮 Javascript
gulp-concat 上面幾個都是壓縮，這插件是管合並的...恭喜，“減少網絡請求”的成就達成:)
gulp-autoprefixer 給 CSS 增加前綴。解決某些CSS屬性不是標准屬性，有各種瀏覽器前綴的情況，灰常有用
gulp-rename 修改文件名稱。比如有時我們需要把app.js改成app.min.js，瞬間高級了
gulp-util 最基礎的工具，但俺只用來打日志...
常用插件
run-sequence gulp 的 task 都是並行(異步)執行，如果遇見需要串行的場景，那么這個插件就是必備了。偶的使用場景是：處理(壓縮、合並等等) CSS/JS、再gulp-rev、再上傳 CDN；然后使用 CDN的地址替換 HTML 中的 CSS/JS 地址，再壓縮 HTML。那么替換 HTML 這步須在之前的工作處理完后再執行。 ** 最后要說，gulp4.0發布后，不需要RS也可以搞定串行任務了 **
del / gulp-clean 刪除。俺的使用場景是：JS/CSS 文件都會在壓縮后使用gulp-rev，即文件名被hash，然后再上傳到 CDN，最后俺再使用 刪除插件 把本地壓縮后的文件刪除掉，不用多余保存。
gulp-rev 把靜態文件名改成hash的形式。
gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest。json 后替換對應的文件名稱。
gulp-rev-collector 到線上環境前，我會用來配合gulp-rev使用，替換 HTML 中的路徑
gulp-rev-append 給頁面引用的靜態文件增加hash后綴，避免被瀏覽器緩存...當然，如果是使用 CDN，這個套路就不行了
gulp-connect / gulp-livereload LiveReload 的倆款插件都值得擁有，不過都各稍有學習成本，看看文檔就明白鳥
gulp-sourcemaps 處理 JavaScript 時生成 SourceMap；如果你不了解 SourceMap，可以看看這篇阮一峰大神的《Source Map 詳解》
gulp-load-plugins 幫忙偷懶用的，可以幫我們加載插件，不用require或者import...當然，俺個人感覺用了這個插件后，閱讀gulpfile.js的可讀性差了，魚和熊掌不可兼得:(
gulp-jshint JavaScript 代碼校驗
gulp-sass / gulp-less 寫 CSS 的同學都懂哈
進階插件
babel JS 語法新特性用起來。這個插件可以讓我們用新的 標准/特性/提案 寫 JavaScript 代碼，然后再向下 轉換編譯，最終生成隨處可用的 JavaScript 代碼。更通俗的說話就是：可以用新的規范寫代碼，經過 babel 編譯后生成沒有兼容問題的代碼。
gulp-flatten 移動指定文件，不想壓縮或者合並的時候，直接用這個插件把對應文件移動到指定文件夾。俺偶爾在內部項目會偷懶用上，圖方便:)
gulp-coffee CoffeeScript 值得去了解
gulp-markdown-pdf 把 Markdown 編譯為 PDF
gulp-markdown 寫手的福音，可以把 Markdown 轉成 HTML
gulp-html2md 把 HTML 編譯為 Markdown
gulp-tinypng 超屌的圖片壓縮工具，使用 Tinypng 引擎。PS：因為 Tinypng 免費帳號有月限制，所以使用使需注意。
sprity 生成雪碧圖。稍有點學習成本，仔細閱讀文檔即可。
gulp-if 可以在 pipe 里面寫點邏輯了，屌不屌。舉例：比如處理 ./pub/*.js，如果文件名稱是 xxx.js，那么不處理；更可以用來區分當前是開發環境還是生產環境。
gulp-file-include 俺搞內部項目的時候會用到，讓 HTML 組件化的第一小步
gulp-git 直接在 Build 時把代碼都提交到 git上了...特么勞資懶起來連我自己都害怕
gulp-qiniu 用於把指定文件上傳至七牛的指定路徑下(PS:首先，你得有自己的七牛賬號和空間)
gulp-notify 在控制台中加入文字描述，build 的時候更高級有木有。當然，當需要的時候把錯誤信息也展示出來會很有幫助。更高級的功能就需要你查看其文檔了~
gulp-plumber gulp 的錯誤處理有點坑，假如發生錯誤進程就掛了。相對的解決辦法不少，但是這個是我個人比較推薦的，比特么在容易出錯的地方寫錯誤監聽靠譜。所以這個插件可以阻止 gulp 插件發生錯誤導致進程退出並輸出錯誤日志。