zoukankan      html  css  js  c++  java
  • Gulp使用入门操作---压缩图片

    gulp 压缩图片

    压缩 图片文件可降低文件大小,提高图片加载速度。

    找到规律转换为 gulp 代码

    规律

    找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下。

    gulp 代码

    一、安装 gulp-imagemin 模块

    提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作。

    在命令行输入 npm install gulp-imagemin

    安装成功后你会看到如下信息:(安装时间可能会比较长取决于网络)


    D:liji-gulp>npm install gulp-imagemin

    > optipng-bin@3.1.4 postinstall D:liji-gulp ode_modulesoptipng-bin
    > node lib/install.js

    √ optipng pre-build test passed successfully

    > jpegtran-bin@3.2.0 postinstall D:liji-gulp ode_modulesjpegtran-bin
    > node lib/install.js

    √ jpegtran pre-build test passed successfully

    > gifsicle@3.0.4 postinstall D:liji-gulp ode_modulesgifsicle
    > node lib/install.js

    √ gifsicle pre-build test passed successfully
    npm WARN asker@1.1.1 No repository field.

    + gulp-imagemin@3.3.0
    added 313 packages in 137.608s

    ----------
    tips:1、可以执行 npm list --depth 0  查看当前已经安装的包;执行 npm list -g --depth 0  查看全局安装的包;
    2、error : 在 node -v ; npm -v ; 安装包OK; 大多为  gulpfile.js  语法 和 package.json 缺少配置的问题;
    3、install 添加包 的时候追加 -save-dev 将包信息添加到devDependencies,表示你开发时依赖的包裹。 

    关于 --save-dev --save 的区别 

    ------------

    二、创建 gulpfile.js 文件编写代码

    在对应目录创建 gulpfile.js 文件并写入如下内容:

    // 获取 gulp
    var gulp = require('gulp');

    // 获取 gulp-imagemin 模块
    var imagemin = require('gulp-imagemin')

    // 压缩图片任务
    // 在命令行输入 gulp images 启动此任务
    gulp.task('images', function () {
    // 1. 找到图片
    gulp.src('images/*.*')
    // 2. 压缩图片
    .pipe(imagemin({
    progressive: true
    }))
    // 3. 另存图片
    .pipe(gulp.dest('dist/images'))
    });

    // 在命令行使用 gulp auto 启动此任务
    gulp.task('auto', function () {
    // 监听文件修改,当文件被修改则执行 images 任务
    gulp.watch('images/*.*)', ['images'])
    });

    // 使用 gulp.task('default') 定义默认任务
    // 在命令行使用 gulp 启动 images 任务和 auto 任务
    gulp.task('default', ['images', 'auto'])
    你可以访问 gulp-imagemin 以查看更多用法。

    三、在 images/ 目录下存放图片

    在 gulpfile.js 对应目录创建 images 文件夹,并在 images/ 目录下存放图片。

    你可以访问 https://github.com/nimojs/gulp-book/tree/master/demo/chapter4/images/ 下载示例图片

    四、运行 gulp 查看效果

    在命令行输入 gulp +回车

    你将看到命令行出现如下提示

    gulp

    D:liji-gulp>gulp
    [18:44:12] Using gulpfile D:liji-gulpgulpfile.js
    [18:44:12] Starting 'images'...
    [18:44:12] Finished 'images' after 15 ms
    [18:44:12] Starting 'auto'...
    [18:44:12] Finished 'auto' after 40 ms
    [18:44:12] Starting 'default'...
    [18:44:12] Finished 'default' after 93 μs
    [18:44:33] Starting 'images'...
    [18:44:33] Finished 'images' after 1.35 ms
    [18:44:33] Starting 'images'...
    [18:44:33] Finished 'images' after 915 μs
    [18:44:57] gulp-imagemin: Minified 19 images (saved 41.5 kB - 4.2%)

     1 'use strict';
     2 var gulp = require('gulp'),
     3     imagemin = require('gulp-imagemin');
     4 //压缩 图片
     5 gulp.task('images',function () {
     6     gulp.src('images/index/*.*')
     7         .pipe(imagemin({
     8             progressive: true
     9         }))
    10         .pipe(gulp.dest('dist/images/index'))
    11 })
    12 
    13 gulp.task('auto',function () {
    14     gulp.watch('images/index/*.*', ['images'])
    15 })
    16 gulp.task('default', ['images', 'auto'])
  • 相关阅读:
    怎么查看京东店铺的品牌ID
    PPT编辑的时候很卡,放映的时候不卡,咋回事?
    codevs 1702素数判定2
    codevs 2530大质数
    codevs 1488GangGang的烦恼
    codevs 2851 菜菜买气球
    hdu 5653 Bomber Man wants to bomb an Array
    poj 3661 Running
    poj 1651 Multiplication Puzzle
    hdu 2476 String Painter
  • 原文地址:https://www.cnblogs.com/lidongfeng/p/7241438.html
Copyright © 2011-2022 走看看