文档章节

使用gulp构建前端(二)

年少爱追梦
 年少爱追梦
发布于 2016/07/07 15:06
字数 589
阅读 31
收藏 0

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

© 著作权归作者所有

年少爱追梦
粉丝 35
博文 190
码字总数 119538
作品 0
杭州
程序员
私信 提问
gulp搭建起步及前端脚手架--sass篇-详解

gulp gulp 简介 gulp 是一个前端自动构建工具 下面我来带大家一起搭建一个前端脚手架: 一、安装 全局安装 ps: 安装成功之后执行 gulp -v查看版本号 二、创建项目 新建一个空的文件夹来存放 ...

周瑾ruiqi
2018/05/16
0
0
nodejs+gulp+webpack基础知识

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/English0523/article/details/100009783 知识点涉及怎么结合gulp、w...

天府云创
08/22
0
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
2018/01/08
0
0
Gulp在前端的常用操作实例

以前在做代码优化的时候,一般都用一些网上的在线工具来完成,写LESS的时候,一般用Koala来编译,感觉用起来也挺不错的。但是现在构建工具的出现,让以前做的那些繁琐操作变的更方便一些了,...

lecepin
2017/02/17
0
0
gulp前端自动化

前言 gulp的运行依赖与node.js,因此需保证node.js已经安装,node.js的下载地址https://nodejs.org/en/ , 以下操作在windows环境下完成,在其他操作系统其实也是相似的 一,安装gulp cmd进入...

上官胡闹
2016/04/30
111
0

没有更多内容

加载失败,请刷新页面

加载更多

精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
6分钟前
2
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
18分钟前
1
0
jenkins 插件下载加速最终方案

推荐做法 1、告诉jenkins 我哪些插件需要更新 jenkins插件清华大学镜像地址 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json 1.进入jenkins系统管理 2.进入插件管...

vasks
24分钟前
2
0
composer爆错:zlib_decode():data error

解决办法:先用 composer diagnose 命令检测 然后 composer self-update 更新composer版本 最后执行 composer update 或者 composer install composer 切换阿里云镜像 用起来还快 composer c...

koothon
31分钟前
2
0
shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部