gulp入門學習

gulp做爲新一代前端項目自動化構件工具，已經廣泛應用於前端工程中。大部分前端開發者對gulp已經再也不陌生，可是對於剛接觸gulp的開發人員而言，也免不了些許迷茫。試着從本身學習和使用經驗講一講。
首先，回顧當下本身所開發的前端項目，是否包含js、css、images靜態資源，在項目上線前，咱們須要這些靜態資源合併壓縮。在學習自動化構件工具以前的開發流程中，咱們通常須要找到一些工具，我經常使用的有oschina在線工具、koala(js/css編譯壓縮)、TinyPNG(圖片壓縮)，配置文件輸入輸出，upload、download、咱們不斷重複着這些工做。煩不煩，反正我是有些厭倦了。

咱們本該將更多的精力放在更有意義的事情上

因此，grunt、gulp這一類構件工具出現了，將咱們解救於重複的工做中。就本身的理解，自動化構件工具的核心是將咱們的工做流抽離爲一個個任務(task)，根據咱們本身的需求，css的合併壓縮能夠爲一個任務、js的合併壓縮能夠爲一個任務、圖片的壓縮也能夠爲一個任務，咱們能夠將上線前對靜態資源的操做分紅以上三個任務。最後，咱們只須要運行一個命令，這些任務就會自動執行。再加上對每一個文件變化的監聽，每次文件的修改都會觸發自動構建。媽媽不再擔憂咱們作重複的事情了，是否是倍兒爽？

對於我，學習一個新的工具，首先是用起來。

• gulp須要依賴node環境運行，首先確保本身安裝有node環境

• 全局安裝gulp,npm install -g gulp

• 在文件夾建立gulpfile.js

• 文件夾下建立src/css/main.css和src/js/main.js

• 安裝gulp和gulp plugin，執行npm install --save-dev gulp {gulp插件名},以cssmin和uglifyjs爲例,npm install --save-dev gulp-cssmin gulp-uglify gulp-rename

• 配置gulpfile，以cssmin和uglifyjs爲例

const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');

gulp.task('min:css', function () {
    return gulp.src('src/css/main.css')
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('min:js', function () {
    return gulp.src('src/js/main.js')
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['min:js', 'min:css']);

• 執行gulp,運行gulp default任務，執行gulp min:css,根據taskname執行單個任務

• 執行結果,目錄下有新增dist/css/main.min.css和dist/js/main.min.js壓縮文件

根據以上步驟，gulp基本使用起來了。

本章源碼託管於github/demo-gulp,但願能對gulp初學者有幫助。