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

来源：oschina

链接：https://my.oschina.net/u/2285811/blog/707782

标签

gulp

less

box-shadow