gulp压缩静态资源

JellyBool 发布于2019-08-22 11:08 / 2699人阅读

摘要：需求分析我有等的压缩需求，能满足是构建自动化的工具，对业务的处理依托第三方插件来完成官方导读前提运行环境安装时并配置了是的包管理工具，就能下载相应模块类似于的框架的也是下载依赖的好手步骤下载配置调用执行实践的是中已下载的模块直接使用模块名

[需求分析]

我有JS/Css/html等的压缩需求，gulp能满足

gulp是构建自动化的工具，对业务的处理,依托第三方插件来完成

官方导读 http://www.gulpjs.com.cn/docs...

[前提]

node.js运行环境安装时并配置了npm

npm是node.js的包管理工具，npm install 就能下载相应模块

类似于php的laravel框架的composer require,也是下载依赖的好手

[步骤]

gulp下载

gulpfile.js配置

gulp 调用执行

[实践]

var gulp =  require("gulp"),            //require的是node_modules中已下载的模块,直接使用模块名
    cssmin = require("gulp-cssmin"),    //譬如你要处理css压缩，那么你得确保已经npm install gulp-cssmin.这样才能require
    jsmin = require("gulp-uglify");

/*gulp分配任务给指定的插件，由该插件输入输出式处理*/
//Css压缩
gulp.task("cssmin",function () {        //cssmin是gulp调用执行时的任务名,随意
    /*白话文:把什么样的文件，输出给哪个插件处理，结果再输出到哪里*/
    gulp.src("./public/mobile/css/*.css")
        .pipe(cssmin())
        .pipe(gulp.dest("./release/css"));
});

//JS压缩
gulp.task("jsmin",function () {
    gulp.src("./public/mobile/js/*.js")
        .pipe(jsmin())
        .pipe(gulp.dest("./release/js"));
});

[调用]

[gulp常用插件整理]

gulp-less         编译LESS文件
gulp-autoprefixer 添加CSS私有前缀
gulp-cssmin       压缩CSS
gulp-rname        重命名
gulp-imagemin     图片压缩
gulp-uglify       压缩JS
gulp-concat       合并
gulp-htmlmin      压缩HTML

插件宝库在此
https://gulpjs.com/plugins/

GPU云服务器云服务器静态资源静态资源引用静态资源存储 cdn静态资源

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91839.html

gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash）

摘要：在资源很多时，例如图片的复制，这个会加快任务的执行速度，特别是需要实时预览时，减少延迟。但是作为个入门短时间内还是不能够被取代得了的。 gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash） tags: gulp 前端自动化开发 npm仓库下载地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基础上的...

silvertheo 2019-08-20 14:39 评论0 收藏0
前端架构gulp与webpack（知识点整理）

摘要：是通过加载器和插件对资源进行处理的。另外我们知道是对整个过程进行控制，所以在其配置文件中配置的每一个对项目中该配置路径下所有的资源都可以管理。一概念介绍 gulp 是 task runner，Webpack 是 module bundler。可以这么说， Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代，或者直接说和对方不重叠的。 1 什么是gulp Gulp...

willin 2019-08-21 18:34 评论0 收藏0
基于 Gulp 的简易前端自动化工程搭建

摘要：生成的文件如下由于给文件添加了哈希值，所以每次编译出来的和都是不一样的，这会导致有很多冗余文件，所以我们可以每次在生成文件之前，先将原来的文件全部清空。中也有做这个工作的插件，因此我们可以在编译压缩添加哈希值之前先将原文将清空。原文链接：http://mrzhang123.github.io/2016/09/07/gulpUse/项目链接：https://github.com/MrZ...

Blackjun 2019-08-22 10:36 评论0 收藏0
前端模块化和构建工具

摘要：以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。强大的设计使得它更像是一个构建平台，而不只是一个打包工具。以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。如今，网页不再...

ad6623 2019-08-20 18:37 评论0 收藏0