前端工具gulp的用途和使用方法

前端工具gulp的用途和使用方法

  在接觸前端開始就據說過grunt和gulp是很叼的前端構建工具，但不知道到底有多叼，只是據說能夠自動編譯less，sass爲css，目前尚未使用less和sass，因此也就沒有嘗試使用grunt和gulp。可是做爲一個技術愛好者仍是經不住誘惑，照着網上的教程簡單使用了一下，總算是知道有什麼用處了，由於都說gulp比grunt更簡單好用，就以gulp的使用方法爲例來講明一下。
    1.文件合併：關於文件合併不少人存在這樣的疑惑，在前端開發中到底該把全部js和css寫在一個文件裏仍是各個頁面分開寫，個人建議是開發的時候分開寫，上線的時候合併爲一個，這樣的好處是對於瀏覽器來講，不一樣頁面中相同的文件默認會請求一次緩存下來，其餘頁面請求相同文件時就直接從緩存中讀取，減小文件的網絡請求能夠提升網頁速度，因此文件合併的是頗有必要的。

    2.文件壓縮：既然都合併了，何再也不壓縮一下呢

    3.語法檢查：這個功能通常會和下面第4條功能配合使用，當文件修改的時候檢查是否有語法錯誤，並在命令行中輸出錯誤信息。

    4.監聽文件變化：監聽某個目錄下文件是否修改，修改的話就執行特定的操做，好比上面幾個操做。
    以上4點是比較經常使用的功能，更多功能根據本身須要添加

1. var gulp = require('gulp');
2. var jshint = require('gulp-jshint');//語法檢查
3. var concat = require('gulp-concat');//合併文件
4. var uglify = require('gulp-uglify');//壓縮代碼
5. var rename = require('gulp-rename');//重命名
6. // 語法檢查
7. gulp.task('jshint', function () {
8. return gulp.src('public/javascripts/*.js')
9. .pipe(jshint())
10. .pipe(jshint.reporter('default'));
11. });
12. // 合併文件以後壓縮代碼
13. gulp.task('minify', function (){
14. return gulp.src('public/javascripts/*.js')
15. .pipe(concat('all.js'))
16. .pipe(gulp.dest('public/javascripts/dist'))
17. .pipe(uglify())
18. .pipe(rename('all.min.js'))
19. .pipe(gulp.dest('public/javascripts/dist'));
20. });
21. // 監視文件的變化
22. gulp.task('watch', function () {
23. gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
24. });
25. // 註冊缺省任務
26. gulp.task('default', ['jshint', 'minify', 'watch']);
27. // gulp.task('default', ['jshint', 'minify']);

目錄結構：