gulp 入門

公司項目中用的代碼構建工具是gulp,如今對用到的gulp插件的用法作一下總結。

gulp是基於node.js的自動任務運行器，咱們用它來完成javascript、css、sass/less、html/css、image等文件的合併和壓縮，以及瀏覽器自動刷新、監聽文件等等。

首先要安裝node.js環境，而後全局安裝gulp（使用的是淘寶鏡像的cnpm）): 

cnpm install gulp -g

而後在項目文件夾下新建一個名爲gulpfile.js的文件，這個文件就是gulp的主文件，在這個文件中編寫gulp任務。

var gulp = require('gulp');

這行代碼告訴node去node_modules中查找gulp包，先局部查找，找不到再去全局環境中找，而後將其賦給變量gulp，就能夠使用了。

在項目文件夾下打開node命令行窗口，安裝gulp包，--save-dev是爲了將安裝的gulp的版本信息寫入package.json文件中，這個文件中保存了和項目相關的各類依賴關係，在這裏就是項目所安裝的插件:

cnpm install gulp --save-dev

OK，如今咱們就能夠使用gulp了。gulp的使用方法很是簡單：

gulp.task('taskName',function(){　　
　　return gulp.src('文件地址')
　　　　　　.pipe(導入到gulp插件中)
　　　　　　.pipe(someplugin())
　　　　　　.pipe(gulp.dest('要輸出文件的地址'));
});

任務名稱是本身起的，而後在node命令行窗口中執行命令便可：

gulp taskName

咱們的項目中用到了以下插件：

var less = require('gulp-less'),//css預處理
    concat = require('gulp-concat'),//合併插件
    uglify = require('gulp-uglify'),//壓縮js的插件
    minifyCss = require('gulp-minify-css'),//壓縮CSS插件
    rename = require('gulp-rename'),//重命名插件
    plumber = require('gulp-plumber'),//錯誤監聽處理
    autoprefixer = require('gulp-autoprefixer');

將它們依次安裝並保存在package.json文件中後，就能夠使用了。

gulp API主要有四個：gulp.src,gulp.dest,gulp.task,gulp.watch;只要合理使用這四個API就能夠方便迅速的配置文件，gulp真的是很方便.

//將less文件編譯成css並壓縮

gulp.task('less',function(){
   return gulp.src('app/src/less/*.less')
       .pipe(autoprefixer({
          browsers:['last 2 versions','Android >= 4.0'],
          cascade:true,//是否美化屬性值 默認：true 像這樣：
          //-webkit-transform:rotate(45deg);
          //        transform:rotate(45deg);
          remove:true //是否去掉沒必要要的前綴 默認:true
       }))
       .pipe(less())
       .pipe(gulp.dest('app/src/css'))
       .pipe(minifyCss())
       .pipe(rename({suffix:'.min'}))
       .pipe(gulp.dest('app/bulid/css'));
});

//合併壓縮js文件

gulp.task('concatjs',function(){
   return gulp.src('app/src/js/cat/*.js')
       .pipe(plumber())//防止出錯中止
       .pipe(concat('index.js'))
       .pipe(uglify())
       .pipe(rename({suffix:'.min'}))
       .pipe(gulp.dest('app/bulid/js/'))
});

//移動文件

gulp.task('remove',function(){
   return gulp.src('app/src/*/**.html')
       .pipe(gulp.dest('app/bulid'));
});

　　

//監聽事件

gulp.task('watch',['remove','concatjs','less'],function(){
   gulp.watch('app/src/less/*.less',['less']);
    gulp.watch('app/src/js/**/*.js',['js']);
　　......//其它任務
});