使用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