基礎教程：
常用外掛程式：
系列教程：
細節注意：
revcollector-路徑替換-詳細介紹：
revcollector-路徑替換-預設只首次替換成功：
gulp.spritesmith-精靈圖：
gulp-file-include-模板復用功能：
** npm 映象：
以下是我常用的外掛程式package.json：
}
1.壓縮外掛程式 gulp-imagemin好像跟 node版本有關，如果 node版本過高，貌似會報錯
2. 不建議使用自動載入外掛程式 gulp-load-plugins，有點坑
案例1
var gulp = require('gulp'),
sequence = require('gulp-sequence'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
rev = require('gulp-rev'),
revc = require('gulp-rev-collector');
// 壓縮js並加min字尾
gulp.task('uglify', function () ))
.pipe(uglify())
.pipe(gulp.dest('./skin/ding'));
});
// 給檔名加上md5字串
gulp.task('rev', function () );
// 替換html中引用的檔名，和任務rev聯合使用
gulp.task('revc', function() ))
.pipe(gulp.dest('./skin/ding'));
});
// 複製頁面，改變html檔名，防止快取
gulp.task('revhtml', function () ))
.pipe(gulp.dest('./skin/ding'));
});
// 控制任務執行的順序
gulp.task('sequence', sequence('uglify', 'rev', 'revc', 'revhtml'));
// 監控
gulp.task('watch', function() )
})});
案例2
// 壓縮js並加min字尾
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');
gulp.task('uglify', function () ))
.pipe(uglify())
.pipe(gulp.dest('./js'));
});
案例3
// 自動重新整理
var gulp = require('gulp');
var browsersync = require('browser-sync').create();
gulp.task('browsersync', function() );
gulp.watch(['*.html', 'js/abc/*.js']).on('change', browsersync.reload);
});
案例4
var gulp = require('gulp');
//載入gulp-load-plugins外掛程式，並馬上執行它，不建議使用該外掛程式，很坑，所以以下可能報錯var plugins = require('gulp-load-plugins')();
//模板復用
gulp.task('fileinclude', function() );
//sass(檔名前面帶有_的，預設不被編譯)
gulp.task('sass', function() )).pipe(gulp.dest('../css'));
});//無失真壓縮
gulp.task('imagemin', function() );
//給檔名加上md5字串
gulp.task('rev', function () );
//替換html中引用的檔名，和任務rev聯合使用
gulp.task('revc', function() ))
.pipe(gulp.dest('./'));
});//自動生成精靈圖
gulp.task('sprite', function () ))
.pipe(gulp.dest('images'));
});//監控
gulp.task('watch', function() );
前端構建工具gulp安裝教程
首先先問自己乙個問題 平時用sass less寫css，用jade寫 html 那麼這些檔案的的測試 檢查 合併 壓縮 格式化 部署，監聽。應該怎麼完成呢？就來壓縮合併來講，可以減少多個css，js檔案請求，優化網頁效能，這樣的工作是否應該有乙個很好的解決方案呢？答案就是gulp。安裝gulp如下幾...
入門gulp前端構建工具
1.全域性安裝 gulp 倘若之前電腦安裝過，則跳過此步驟 cnpm install g gulp 2.作為專案的開發依賴 devdependencies 安裝 此步驟會自動在目錄下建立package.json檔案，因此無需cnpm init cnpm install s e dev gulp 3....
gulp前端自動化構建工具
gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...