gulp 入門學習

想學習一下怎麼使用gulp，找了幾篇博客，一開始就放大招，js壓縮，css壓縮，sass編譯，less編譯，拼接等等全堆積上來。 對於我這種以前沒接觸過任務自動管理工具的人來講，感受像看電影快進同樣，只要中途有不理解的就要斷篇。

gulp安裝

• 安裝gulp 若是參數-g 表示全局安裝

  $ npm install gulp

  $ npm install gulp --save-dev

新建文件目錄

• dist: 壓縮後的線上代碼
• src: 生產環境的本地源代碼
• gulpfile.js: gulp的配置文件，在根目錄中

開始構建項目

現有目錄：

└── src/

└── js/

└── a.js

任務：

1. 找到src目錄下的js文件下的js文件
2. 壓縮這些js文件
3. 壓縮後的代碼輸出到dist/js/目錄下

開始任務：

1. 由於如今須要壓縮js文件，因此須要安裝gulp-uglify模塊
2. npm install gulp-uglify
3. 在根目錄下新建並編輯gulpfile.js

gulpfile.js代碼以下

//獲取gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');

//壓縮js文件
gulp.task('script', function() {
    //1.找到文件 *是通配符，表示找到全部的js文件
    gulp.src('src/js/*.js')
    //2.壓縮文件
    .pipe(uglify())
    //3.另存壓縮後文件
    .pipe(gulp.dest('dist/js'))
});
 

執行壓縮任務：

在命令行輸入 gulp script

在dist/js/下就能看壓縮後的文件了。

實時更新壓縮文件

//獲取gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');

//壓縮js文件
gulp.task('script', function() {
    //1.找到文件 *是通配符，表示找到全部的js文件
    gulp.src('src/js/*.js')
    //2.壓縮文件
    .pipe(uglify())
    //3.另存壓縮後文件
    .pipe(gulp.dest('dist/js'))
});

//在命令行使用gulp啓動此任務
gulp.task('watchjs', function() {
    //監聽文件修改，當文件修改則執行script任務
    gulp.watch('src/js/*.js', ['script']);
});

//在命令行 輸入gulp  等於輸入gulp default
//在此處會同時執行script任務和watchjs任務
gulp.task('default', ["script", "watchjs"]);

其餘模塊的使用也差很少相似。

gulp模塊

• 編譯Sass (gulp-ruby-sass)
• Autoprefixer (gulp-autoprefixer)
• 縮小化(minify)CSS (gulp-minify-css)
• JSHint (gulp-jshint)
• 拼接 (gulp-concat)
• 醜化(Uglify) (gulp-uglify)
• 圖片壓縮 (gulp-imagemin)
• 即時重整(LiveReload) (gulp-livereload)
• 清理檔案 (gulp-clean)
• 圖片快取，只有更改過得圖片會進行壓縮 (gulp-cache)
• 更動通知 (gulp-notify)

參考連接

Gulp 入門指南

進階