使用gulp構建前端（二）

                                               使用gulp構建前端（二）

  在使用gulp構建前端（一）文章中已經搭建了整個gulp的使用環境，如今咱們來開始使用一些簡單的插件的進行整個項目的編譯過程。

   插件一

   使用gulp-imagemin壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片）

     仍是進入項目目錄本地安裝gulp-imagemin

npm install gulp-imagemin  --save-dev

     查看package.json文件是否添加了依賴，熟練事後就不用查看了，排查錯誤的時候能夠這樣。

{
  "name": "chen",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "chen",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.0.1"
  
  }
}

    開始在gulpfile.js文件中開始編寫

var gulp = require('gulp'), //本地安裝gulp所用到的地方
    imagemin = require('gulp-imagemin');//引入安裝的插件

//可能會用到的變量
var source = 'source/',
    dest   = 'build/',
    images = 'source/images/*.*';

//壓縮圖片的任務
gulp.task('images', function() {
      return gulp.src(images)
        // Pass in options to the task
        .pipe(imagemin({optimizationLevel: 5}))
        .pipe(gulp.dest('build/img'));
});

//入口任務中調用‘images’任務
gulp.task('default', ['images']);

    返回到cmd中接着執行gulp命令，能夠發現，在build目錄中會增長目錄img，目錄中的圖片都被壓縮了一部分。壓縮程度就是optimizationLevel決定，不帶參數默認的是3。（更多解釋查看文章最後連接）

    插件二

   使用gulp-less插件將less文件編譯成css，當有less文件發生改變自動編譯less，並保證less語法錯誤或出現異常時能正常工做並提示錯誤信息。

     步驟安裝gulp-less插件到本地

npm install gulp-less  --save-dev

     就沒有查看package.json哈，

     編寫gulpfile.js文件

var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less');

//編譯lses 文件成 css文件
gulp.task('less1',function(){
  return gulp.src('source/less/*.*')
         .pipe(less())
         .pipe(gulp.dest('build/less'));
});
gulp.task('default', ['less1']);

      指定目錄下面：編寫一個簡單的less文件，（css擴張，動態css）

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

      回到cmd中編譯gulp，查看生成的css文件

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

 

插件1的github地址：https://github.com/xiaoyaojones/gulp-imagemin,裏面有參數的做用。

插件2的github地址：https://github.com/plus3network/gulp-less