美文网首页程序员让前端飞前端常用技术汇总
前端开发使用gulp对文件进行压缩、合并、版本更新

前端开发使用gulp对文件进行压缩、合并、版本更新

作者: 小伙子太认真 | 来源:发表于2019-03-04 02:47 被阅读7次

默认阅读者已经会node、npm和git工具的使用了,不会不用继续往下读。

五分钟就会的一个小工具

第一步:使用npm init命令----生成一个pakeage文件。

使用命令之后,除了name需要自己取一个项目的名字,其他按回车键。 package文件,当然devDependencies什么都没有,后面添加的,先不管

第二步:下载gulp到开发环境。使用下面命令

第三步:依赖包用空格隔开就行,就可以一起下载到开发环境了。不过要先写好gulpfile.js文件。如下图所示

gulpfile.js

注意:dist文件夹就是文件压缩之后存放的位置,src就是前端开发的各种脚本文件了。

文件结构,其他文件里面的内容有兴趣自己搜一下。 下载gulp依赖包

gulp-csso ------ 用来压缩css文件

gulp-filter ------ 过滤文件,并恢复文件流

gulp-rev ------  生成源文件和添加hash

gulp-rev-replace ------  重写已经被 gulp-rev重命名的文件名的出现

gulp-uglify ------   压缩js文件

gulp-useref ------  要用来合并文件

用了gulp-useref依赖包之后,需要上面的操作,才能合并文件。

第四步:在git工具输入gulp

默认执行defalut函数。

有什么问题欢迎下方留言

不要吝啬你的赞哟!

相关文章

  • 前端开发使用gulp对文件进行压缩、合并、版本更新

    默认阅读者已经会node、npm和git工具的使用了,不会不用继续往下读。 五分钟就会的一个小工具 第一步:使用n...

  • Gulp总结

    # gulp 前端自动化构建工具,可以进行文本合并,文件拷贝,js压缩,css压缩,图片压缩等。 ### 入门 1...

  • Gulp总结

    gulp 前端自动化构建工具,可以进行文本合并,文件拷贝,js压缩,css压缩,图片压缩等。 入门 全局安装 gu...

  • gulp详解一

    gulp简介 gulp,是基于nodejs的前端自动化构建工具,用于压缩项目文件,合并文件,部署等,简言之,就是解...

  • 前端自动化工具|gulp新手入门

    gulp是前端自动化工具,它可以进行html压缩、css压缩合并、js检查压缩、图片压缩、编译less、编译...

  • CocosCreator和gulp-使用gulp-imagemi

    在游戏开发中,打包前进行图片压缩是必需工作,gulp内置了很多构建、优化插件,例如:图片压缩、js文件合并等等,这...

  • gulp压缩合并文件

    gulp压缩合并文件流程 //引入gulp和gulp插件var gulp = require('gulp');va...

  • gulp与webpack的区别

    一。gulp:强调的是前端开发的流程,通过配置一系列的task,定义task处理的事物(例如文件压缩合并、雪碧图、...

  • gulp-css压缩

    gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是一个基于流的构建工具,可...

  • 项目构建

    项目构建 gulp 合并、编译、压缩等 简单 使用 webpack 合并、编译、压缩等 强大 使用

网友评论

    本文标题:前端开发使用gulp对文件进行压缩、合并、版本更新

    本文链接:https://www.haomeiwen.com/subject/ovwvuqtx.html