gulp插件的使用方法

gulp插件不少，這裏介紹幾個比較經常使用的插件。。。

 

1.gulp-less：用於把less文件編譯成css文件。

     由於html文件中不能直接引用less文件（須要導入相關編譯js文件配合才行），所以須要千方百計把相應less文件編譯成less文件編譯成css文件。除了考拉編譯外，還能夠經過gulp這個自動化構建工具實現less文件的編譯。

　　在用gulp編譯前，首先你須要安裝node.js。gulp是基於node.js，理所固然須要安裝node.js。npm（node package manager)是node.js的包管理器，用於node插件管理（包括安裝，卸載，管理依賴等），在安裝gulp的時候，npm已經隨着安裝成功了。由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，因此建議使用cnpm。命令提示符執行：

npm install cnpm -g --registry=https://registry.npm.taobao.org

經過上面一步，cnmp能夠取代npm了，它們的用法徹底一致。

　　接着全局安裝gulp。全局安裝gulp的目的是爲了經過它執行gulp任務。命令提示符執行：

cnmp install  gulp -g

命令提示符執行：

gulp -v

出現版本號即爲正確安裝

　　而後本地安裝gulp。全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。命令提示符執行：

cnpm  install  gulp  --save-dev

此時gulp寫進項目package.json。

　　完成以上步驟之後，你只須要在所在項目裏安裝gulp-less插件便可。命令提示符執行：

cnpm install  gulp-less --save-dev

等命令執行完成後，你的項目已經具有了編譯less文件的能力。而後配置你的gulpfile.js文件。

配置以下：

var gulp = require('gulp'),
    less = require('gulp-less')；

//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function () {
    gulp.src('less/*.less')       //該任務針對的文件
        .pipe(less())             //該任務調用的模塊
        .pipe(gulp.dest('css'));  //將會在css下生成index.css
});
//監聽less文件
gulp.task('gulpWatch',function(){

gulp.watch('less/*.less',['testLess']);

});

//同時讓默認程序執行一次，能夠提升開始執行速度。
gulp.task('default',['testLess','gulpWatch']);

　　　　最後在你的當前項目命令行中輸入gulp執行便可。你會看到在相關的路徑下生成對應的css文件。
2.gulp-clean-css：css文件壓縮。
3.gulp-uglify：js壓縮
4.gulp-concat：js合併
5.gulp-rename：重命名，給js壓縮文件添加.min後綴
6.gulp-jshint：js語法檢查

tip：若是以上插件都須要用到，可使用一行命令提示符搞定，以下：
cnpm  install  gulp  gulp-clean-css gulp-uglify gulp-concat  gulp-rename  gulp-jshint  jshint  
gulp-less gulp-sass  --save-dev

配置gulpfile.js以下：

var gulp = require('gulp'),
    less = require('gulp-less'),
    sass = require('gulp-sass');
    minifycss = require('gulp-clean-css'),//css文件壓縮
    concat = require('gulp-concat'),//js合併
    uglify = require('gulp-uglify'),//js壓縮
    rename = require('gulp-rename'),//重命名  給js壓縮文件添加.min前綴
    jshint=require('gulp-jshint');//js語法檢查
//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function () {
    gulp.src('less/*.less')       //該任務針對的文件
        .pipe(less())             //該任務調用的模塊
        .pipe(gulp.dest('css'));  //將會在css下生成index.css
});
//定義一個testScss任務（自定義任務名稱）
gulp.task('testSass', function () {
    gulp.src('sass/*.scss')      //該任務針對的文件
        .pipe(sass())         //該任務調用的模塊
        .pipe(gulp.dest('css'));  //將會在css下生成index.css
});

//語法檢查
gulp.task('jshint', function () {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
//壓縮css
gulp.task('minifycss', function() {
    return gulp.src('css/*.css')    //須要操做的文件
        .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
        .pipe(minifycss())   //執行壓縮css
        .pipe(gulp.dest('allcss'));   //輸出文件夾
});
//壓縮,合併js
gulp.task('minifyjs', function() {
    return gulp.src('js/*.js')          //須要操做的文件
        .pipe(concat('all.js'))         //合併全部js到all.js
        .pipe(gulp.dest('alljs'))       //輸出到文件夾alljs下
        .pipe(rename({suffix: '.min'})) //rename壓縮後的文件名
        .pipe(uglify())    //壓縮
        .pipe(gulp.dest('alljs'));  //輸出
});
/*//默認命令,在cmd中輸入gulp後,執行的就是這個任務(壓縮js須要在檢查js以後操做)
 gulp.task('default',['jshint'],function() {
 gulp.start('minifycss','minifyjs');
 });*/

gulp.task('gulpWatch',function(){
    gulp.watch('js/*.js',['minifyjs']);
    gulp.watch('less/*.less',['testLess','minifycss']);
});
//同時讓默認程序執行一次，能夠提升開始執行速度。
gulp.task('default',['jshint','testLess','testSass','minifycss','minifyjs','gulpWatch']);

插件安裝完成後在命令行運行gulp便可。