1. 程式人生 > >前端構建工具Gulp入門指南(第二篇)

前端構建工具Gulp入門指南(第二篇)

我們上一篇安裝node環境和gulp工具,並簡單介紹了gulp構建工具的使用;
這篇我們重點介紹gulp任務使用方法。

編譯Lass,Autoprefix及縮小化

檢查node環境是否完成安裝成功,執行命令如下:

node -v	//輸出node版本號

npm -v	//輸出npm版本號

以上兩個命令都可輸出版本資訊即表示node環境安裝成功。

第二步:安裝gulp

全域性安裝gulp,執行命令如下:

npm install --global gulp	//全域性安裝gulp工具

gulp -v	//檢查gulp是否安裝成功

第三步:新建專案並建立gulp環境依賴

執行命令如下:

mkdir testapp &&
cd mkdir testapp //testapp 表示專案名稱 npm init //建立專案,如果許可權不夠加上sudo執行,按照提示一步步操作即可 npm install --save-dev gulp //建立專案的gulp依賴 npm install gulp-less gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev //載入gulp所需外掛

使用 —-save-dev 來更新package.json檔案、 devDependencies 的值,表明專案依賴gulp。

常用的gulp外掛如下:
編譯Lass (gulp-lass)
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)

第四步: 新建配置gulpfile.js檔案,並執行gulp

在專案根目錄新建一個gulpfile.js檔案,檔案程式碼如下:

// 引入 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('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 編譯less
gulp.task('less', function() {
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

// 合併,壓縮檔案
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('lib.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 預設任務
gulp.task('build_dev', function(){
    gulp.run('lint', 'less', 'scripts');

    // 監聽檔案變化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'less', 'scripts');
    });
});

然後執行gulp,執行命令為:

gulp build_dev