gulp前端自動化工具的快速入門案例

最近項目和工做中要開始使用自動化工具了，回想一下之前接觸這個的時候就是什麼nodejs，grunt之類的了，此次乾脆就用一個新的，那麼就是gulp。。。

全局下利用npm安裝gulp

sudo npm install -g gulp

項目中安裝gulp包

npm install gulp --save-dev

這裏建立一個示例項目demo，裏面有index1.js，index2.js，index3.js三個文件

初始化項目

npm init .

gulp

在執行gulp命令的以前記得在根目錄下新建gulpfile.js文件，沒有的話會報錯，建立以後繼續執行就ok。。。

編輯gulpfile.js文件

var gulp = require('gulp');

//壓縮js代碼
var uglify = require('gulp-uglify');

//合併js文件
var concat = require('gulp-concat');

var paths = {
    scripts: ['index1.js', 'index2.js', 'index3.js']
}

gulp.task('default', function() {
    gulp.src(paths.scripts)
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('build'));
});

這裏別忘記安裝一下uglify和concat這兩個插件，以下：

sudo npm install gulp-uglify --save-dev

sudo npm install gulp-concat --save-dev

最後就是執行一下gulp命令了

[21:41:38] Using gulpfile ~/Desktop/jikexueyuan/gulpfile.js
[21:41:38] Starting 'default'...
[21:41:38] Finished 'default' after 7.65 ms

看到這樣的輸出就好，在build文件夾下能夠看到壓縮合並以後的js文件了。。。

通過這面這幾小步，gulp已經被你拿下了，若是還要深刻去搞的話，狂戳 這裏