取代grunt,更簡單的前端腳手架

GULP簡單使用

以前都是使用grunt來搭建前端開發環境，自從又一次看到了gulp,這種簡單配置，管道輸出的方式深深的打動了我，從此將項目都改用gulp搭建

關於gulp的介紹我就不多說了，我們直接來看看怎麼使用他：

一、node環境搭建

首先你的項目中需要安裝node環境，使用npm管理相關模塊，作爲前端工程師,npm一定是陌生的，如沒有安裝，可以在node中下載安裝，並進行環境變量配置。

二、安裝gulp

在控制檯中輸入:

sudo npm install -g gulp  

如果是windows 操作系統 直接輸入

npm install -g gulp  

這時候gulp模塊就已經進入你的系統中了。

三、安裝gulp到項目中去

我們在第二步中，將gulp安裝到了本機，可是我們需要在某一個項目裏面使用gulp，還需要將gulp安裝到相應的項目中去。

可以CD到項目項目跟目錄下去 ，執行。

npm install  gulp  

這時候你的項目根目錄會自動創建node文件夾以及安裝的相應模塊，如圖

npm install -g gulp  

四、安裝相應插件

安裝插件的方法和安裝gulp方法是一樣的，你需要在npm倉庫中尋找你要的插件，

執行：

npm install 插件名 --save

由於我的項目需要，我安裝了

gulp-concat                  //文件合併

gulp-imagemin             //圖片壓縮
gulp-jshint                    //js代碼檢測
gulp-less                     //less編譯
gulp-minify-css            //css壓縮
gulp-rename               //重命名
gulp-uglify                  //js壓縮

這些插件

如果想和我使用同樣的插件，執行

npm install gulp-concat gulp-imagemin gulp-jshint  gulp-less  gulp-minify-css  gulp-rename  gulp-uglify   --save

安裝後，你的node文件夾將會是這樣：

五、編寫gulp文件

在你的項目目錄上，編寫gulpfile.js文件

//引入gulp
var gulp = require('gulp');


//引入組件
var minifyCss = require('gulp-minify-css');  //css壓縮
var concat = require('gulp-concat');           //js合併
var jshint = require('gulp-jshint');           //js規範驗證
var uglify = require('gulp-uglify');           //js壓縮
var less = require('gulp-less');               // less編譯
var rename = require('gulp-rename');          //文件名命名
var imagemin = require('gulp-imagemin');     //圖片壓縮


//less處理 css壓縮
gulp.task('less', function () {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'));
});

//css壓縮
gulp.task('css-min', function () {
    gulp.src('./dist/css/dream.css')
        .pipe(minifyCss())
        .pipe(rename("dream.min.css"))
        .pipe(gulp.dest('./dist/css'));
});

//腳本檢查
gulp.task('lint', function () {
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//js處理
gulp.task('scripts', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(rename("all.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

// 圖片處理
gulp.task('img', function () {
    gulp.src('src/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img'));
});

gulp.task('default', function () {

    //監聽less變化
    gulp.watch('src/less/*.less', function () {
        gulp.run('less');
    });

    //監聽css變化
    gulp.watch('dist/css/dream.css', function () {
        gulp.run('css-min');
    });

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

    //監聽圖片變化
    gulp.watch('src/img/**/*', function () {
        gulp.run('img');
    });

})

然後，在控制檯 輸入gulp 他會自動尋找task爲default的任務，我定義這個任務是監聽src各個目錄下文件的變化，一旦這些文件發生變化，變執行對應的task，比如

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

一旦src/js中任意js文件 改變，我就會執行

<pre name="code" class="javascript">//腳本檢查
gulp.task('lint', function () {
    gulp.src('src/js/*.js')
        .pipe(jshint())                                  //js文件規範 
        .pipe(jshint.reporter('default'));              
});

//js處理
gulp.task('scripts', function () { 
    gulp.src('src/js/*.js')                             
        .pipe(concat('all.js'))                             //合併文件
        .pipe(gulp.dest('./dist/js'))                     //輸出到路徑
        .pipe(rename("all.min.js"))                       //重命名文件
        .pipe(uglify())                                   //壓縮
        .pipe(gulp.dest('./dist/js'));
});

是不是很簡單呢，

還有很多有意思的組件可以在 npm上的gulp插件 上查看