zoukankan      html  css  js  c++  java
  • 怎么使用gulp压缩文件、图片

    gulp 压缩图片

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

    找到规律转换为 gulp 代码

    规律

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

    gulp 代码

    一、安装 gulp-imagemin 模块

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

    在命令行输入 npm install gulp-imagemin

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

    npm install gulp-imagemin
    npm WARN deprecated cross-spawn-async@2.2.4: cross-spawn no longer requires a build toolchain, use it instead!

    > gifsicle@3.0.4 postinstall D:wampwwwBootsDataTable ode_modulesgifsicle
    > node lib/install.js

    √ gifsicle pre-build test passed successfully

    > jpegtran-bin@3.1.0 postinstall D:wampwwwBootsDataTable ode_modulesjpegtran-bin
    > node lib/install.js

    √ jpegtran pre-build test passed successfully

    > optipng-bin@3.1.2 postinstall D:wampwwwBootsDataTable ode_modulesoptipng-bin
    > node lib/install.js

    √ optipng pre-build test passed successfully
    test@1.0.0 D:wampwwwBootsDataTable
    `-- gulp-imagemin@3.0.3
    +-- imagemin@5.2.2
    | +-- file-type@3.8.0
    | +-- globby@5.0.0
    | | +-- array-union@1.0.2
    | | +-- arrify@1.0.1
    | | +-- glob@7.0.6
    | | | +-- fs.realpath@1.0.0
    | | | +-- minimatch@3.0.3
    | | | `-- path-is-absolute@1.0.0
    | | `-- object-assign@4.1.0
    | `-- promise.pipe@3.0.0
    +-- imagemin-gifsicle@5.1.0
    | +-- exec-buffer@3.0.0
    | | +-- execa@0.3.0
    | | | +-- cross-spawn-async@2.2.4
    | | | | `-- lru-cache@4.0.1
    | | | | +-- pseudomap@1.0.2
    | | | | `-- yallist@2.0.0
    | | | +-- npm-run-path@1.0.0
    | | | +-- object-assign@4.1.0
    | | | +-- path-key@1.0.0
    | | | `-- strip-eof@1.0.0
    | | `-- tempfile@1.1.1
    | | `-- uuid@2.0.3
    | +-- gifsicle@3.0.4
    | | +-- bin-build@2.2.0
    | | | +-- archive-type@3.2.0
    | | | +-- decompress@3.0.0
    | | | | +-- buffer-to-vinyl@1.1.0
    | | | | | `-- vinyl@1.2.0
    | | | | +-- concat-stream@1.5.2
    | | | | | `-- typedarray@0.0.6
    | | | | +-- decompress-tar@3.1.0
    | | | | | +-- is-tar@1.0.0
    | | | | | +-- object-assign@2.1.1
    | | | | | +-- strip-dirs@1.1.1
    | | | | | | +-- is-absolute@0.1.7
    | | | | | | | `-- is-relative@0.1.3
    | | | | | | +-- is-natural-number@2.1.1
    | | | | | | `-- sum-up@1.0.3
    | | | | | +-- tar-stream@1.5.2
    | | | | | | +-- bl@1.1.2
    | | | | | | `-- end-of-stream@1.1.0
    | | | | | +-- through2@0.6.5
    | | | | | | `-- readable-stream@1.0.34
    | | | | | | `-- isarray@0.0.1
    | | | | | `-- vinyl@0.4.6
    | | | | | `-- clone@0.2.0
    | | | | +-- decompress-tarbz2@3.1.0
    | | | | | +-- is-bzip2@1.0.0
    | | | | | +-- object-assign@2.1.1
    | | | | | +-- seek-bzip@1.0.5
    | | | | | +-- through2@0.6.5
    | | | | | | `-- readable-stream@1.0.34
    | | | | | | `-- isarray@0.0.1
    | | | | | `-- vinyl@0.4.6
    | | | | | `-- clone@0.2.0
    | | | | +-- decompress-targz@3.1.0
    | | | | | +-- is-gzip@1.0.0
    | | | | | +-- object-assign@2.1.1
    | | | | | +-- through2@0.6.5
    | | | | | | `-- readable-stream@1.0.34
    | | | | | | `-- isarray@0.0.1
    | | | | | `-- vinyl@0.4.6
    | | | | | `-- clone@0.2.0
    | | | | +-- decompress-unzip@3.4.0
    | | | | | +-- is-zip@1.0.0
    | | | | | +-- stat-mode@0.2.2
    | | | | | +-- vinyl@1.2.0
    | | | | | `-- yauzl@2.6.0
    | | | | | +-- buffer-crc32@0.2.5
    | | | | | `-- fd-slicer@1.0.1
    | | | | | `-- pend@1.2.0
    | | | | +-- stream-combiner2@1.1.1
    | | | | | `-- duplexer2@0.1.4
    | | | | +-- vinyl-assign@1.2.1
    | | | | | `-- object-assign@4.1.0
    | | | | `-- vinyl-fs@2.4.3
    | | | | +-- duplexify@3.4.5
    | | | | | +-- end-of-stream@1.0.0
    | | | | | `-- stream-shift@1.0.0
    | | | | +-- glob-stream@5.3.5
    | | | | | +-- glob@5.0.15
    | | | | | +-- glob-parent@3.0.0
    | | | | | | `-- is-glob@3.0.0
    | | | | | | `-- is-extglob@2.0.0
    | | | | | +-- ordered-read-streams@0.3.0
    | | | | | +-- through2@0.6.5
    | | | | | | `-- readable-stream@1.0.34
    | | | | | | `-- isarray@0.0.1
    | | | | | +-- to-absolute-glob@0.1.1
    | | | | | | `-- extend-shallow@2.0.1
    | | | | | `-- unique-stream@2.2.1
    | | | | | `-- json-stable-stringify@1.0.1
    | | | | | `-- jsonify@0.0.0
    | | | | +-- gulp-sourcemaps@1.6.0
    | | | | | +-- convert-source-map@1.3.0
    | | | | | `-- vinyl@1.2.0
    | | | | +-- is-valid-glob@0.3.0
    | | | | +-- lazystream@1.0.0
    | | | | +-- lodash.isequal@4.4.0
    | | | | +-- merge-stream@1.0.0
    | | | | +-- object-assign@4.1.0
    | | | | +-- strip-bom-stream@1.0.0
    | | | | +-- through2-filter@2.0.0
    | | | | +-- vali-date@1.0.0
    | | | | `-- vinyl@1.2.0
    | | | +-- download@4.4.3
    | | | | +-- caw@1.2.0
    | | | | | +-- get-proxy@1.1.0
    | | | | | | `-- rc@1.1.6
    | | | | | | +-- deep-extend@0.4.1
    | | | | | | `-- strip-json-comments@1.0.4
    | | | | | +-- is-obj@1.0.1
    | | | | | `-- tunnel-agent@0.4.3
    | | | | +-- filenamify@1.2.1
    | | | | | +-- filename-reserved-regex@1.0.0
    | | | | | +-- strip-outer@1.0.0
    | | | | | `-- trim-repeated@1.0.0
    | | | | +-- got@5.6.0
    | | | | | +-- create-error-class@3.0.2
    | | | | | | `-- capture-stack-trace@1.0.0
    | | | | | +-- duplexer2@0.1.4
    | | | | | +-- is-plain-obj@1.1.0
    | | | | | +-- is-redirect@1.0.0
    | | | | | +-- is-retry-allowed@1.1.0
    | | | | | +-- is-stream@1.1.0
    | | | | | +-- lowercase-keys@1.0.0
    | | | | | +-- node-status-codes@1.0.0
    | | | | | +-- object-assign@4.1.0
    | | | | | +-- timed-out@2.0.0
    | | | | | +-- unzip-response@1.0.1
    | | | | | `-- url-parse-lax@1.0.0
    | | | | | `-- prepend-http@1.0.4
    | | | | +-- gulp-decompress@1.2.0
    | | | | +-- gulp-rename@1.2.2
    | | | | +-- is-url@1.2.2
    | | | | +-- object-assign@4.1.0
    | | | | +-- read-all-stream@3.1.0
    | | | | +-- vinyl@1.2.0
    | | | | +-- vinyl-fs@2.4.3
    | | | | | `-- glob-stream@5.3.5
    | | | | | +-- glob@5.0.15
    | | | | | +-- glob-parent@3.0.0
    | | | | | | `-- is-glob@3.0.0
    | | | | | | `-- is-extglob@2.0.0
    | | | | | +-- ordered-read-streams@0.3.0
    | | | | | +-- through2@0.6.5
    | | | | | | `-- readable-stream@1.0.34
    | | | | | | `-- isarray@0.0.1
    | | | | | `-- unique-stream@2.2.1
    | | | | `-- ware@1.3.0
    | | | | `-- wrap-fn@0.1.5
    | | | | `-- co@3.1.0
    | | | +-- exec-series@1.0.3
    | | | | +-- async-each-series@1.1.0
    | | | | `-- object-assign@4.1.0
    | | | +-- rimraf@2.5.4
    | | | | `-- glob@7.0.6
    | | | | `-- minimatch@3.0.3
    | | | `-- url-regex@3.2.0
    | | | `-- ip-regex@1.0.3
    | | +-- bin-wrapper@3.0.2
    | | | +-- bin-check@2.0.0
    | | | | `-- executable@1.1.0
    | | | +-- bin-version-check@2.1.0
    | | | | +-- bin-version@1.0.4
    | | | | | `-- find-versions@1.2.1
    | | | | | `-- semver-regex@1.0.0
    | | | | `-- semver-truncate@1.1.2
    | | | | `-- semver@5.3.0
    | | | +-- each-async@1.1.1
    | | | | +-- onetime@1.1.0
    | | | | `-- set-immediate-shim@1.0.1
    | | | +-- lazy-req@1.1.0
    | | | `-- os-filter-obj@1.0.3
    | | `-- logalot@2.1.0
    | | +-- figures@1.7.0
    | | | `-- object-assign@4.1.0
    | | `-- squeak@1.3.0
    | | +-- console-stream@0.1.1
    | | `-- lpad-align@1.1.0
    | | `-- lpad@2.0.1
    | `-- is-gif@1.0.0
    +-- imagemin-jpegtran@5.0.2
    | +-- is-jpg@1.0.0
    | `-- jpegtran-bin@3.1.0
    +-- imagemin-optipng@5.2.1
    | +-- is-png@1.0.0
    | `-- optipng-bin@3.1.2
    +-- imagemin-svgo@5.2.0
    | +-- is-svg@2.0.1
    | | `-- html-comment-regex@1.1.1
    | `-- svgo@0.7.0
    | +-- coa@1.0.1
    | | `-- q@1.4.1
    | +-- colors@1.1.2
    | +-- csso@2.2.1
    | | `-- clap@1.1.1
    | +-- js-yaml@3.6.1
    | | +-- argparse@1.0.7
    | | | `-- sprintf-js@1.0.3
    | | `-- esprima@2.7.3
    | +-- sax@1.2.1
    | `-- whet.extend@0.9.9
    +-- plur@2.1.2
    | `-- irregular-plurals@1.2.0
    +-- pretty-bytes@2.0.1
    `-- through2-concurrent@1.1.1

    npm WARN test@1.0.0 No description
    npm WARN test@1.0.0 No repository field.

    二、创建 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
    [11:07:37] Using gulpfile D:wampwwwBootsDataTablegulpfile.js
    [11:07:37] Starting 'images'...
    [11:07:37] Finished 'images' after 3.57 ms
    [11:07:37] Starting 'auto'...
    [11:07:37] Finished 'auto' after 57 ms
    [11:07:37] Starting 'default'...
    [11:07:37] Finished 'default' after 16 μs
    [11:07:38] gulp-imagemin: Minified 20 images (saved 12.48 kB - 24.2%)

  • 相关阅读:
    解决PKIX:unable to find valid certification path to requested target 的问题
    Linux 上的常用文件传输方式介绍与比较
    用VNC远程图形化连接Linux桌面的配置方法
    红帽中出现”This system is not registered with RHN”的解决方案
    linux安装时出现your cpu does not support long mode的解决方法
    CentOS SSH配置
    es6扩展运算符及rest运算符总结
    es6解构赋值总结
    tortoisegit安装、clon、推送
    es6环境搭建
  • 原文地址:https://www.cnblogs.com/fanjun/p/6130765.html
Copyright © 2011-2022 走看看