gulp 配置前端项目打包
项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问。
gulpjs.com中有很多插件可以用来配置打包部署。
需要用的常用插件有:
gulp-jsmin 压缩js
gulp-minify-css 压缩css
gulp-imagemin 压缩图片
gulp-rename 重命名
gulp-clean 清空文件夹
gulp-copy 拷贝引用库,字体等文件
gulp-replace 替换html内容(将原来.js引用改为.min.js引用)
前置过程不再赘述,安装插件:
- npm install --save-dev gulp gulp-jsmin gulp-minify-css gulp-imagemin gulp-rename gulp-clean gulp-copy gulp-replace
- const gulp = require('gulp'),
- jsmin = require('gulp-jsmin'),
- cssmin = require('gulp-minify-css'),
- rename = require('gulp-rename'),
- copy = require('gulp-copy'),
- clean = require('gulp-clean'),
- imagemin = require('gulp-imagemin'),
- replace = require('gulp-replace');
- // 清空文件夹
- gulp.task('clean', () => {
- gulp.src('dist')
- .pipe(clean())
- })
- // js压缩
- gulp.task('jsmin', () => {
- gulp.src('js/*.js')
- .pipe(jsmin())
- .pipe(rename({
- suffix: '.min'
- }))
- .pipe(gulp.dest('dist/js'));
- });
- // css压缩
- gulp.task('cssmin', () => {
- gulp.src('css/*.css')
- .pipe(cssmin())
- .pipe(rename({
- suffix: '.min'
- }))
- .pipe(gulp.dest('dist/css'))
- });
- // 压缩图片
- gulp.task('imagemin', () => {
- gulp.src('images/*')
- .pipe(imagemin())
- .pipe(gulp.dest('dist/images/'))
- });
- // 复制文件
- gulp.task('copy', () => {
- gulp.src('lib/**/*')
- .pipe(copy('dist'))
- });
- // 替换HTML中的js及css引用为.min引用
- gulp.task('replace', () => {
- gulp.src('index.html')
- .pipe(replace(/js\/.*\./g, '$&min.'))
- .pipe(replace(/css\/.*\./g, '$&min.'))
- .pipe(gulp.dest('dist'))
- });
- // 部署任务
- gulp.task('deploy', [
- 'clean',
- 'jsmin',
- 'cssmin',
- 'imagemin',
- 'copy',
- 'replace'
- ]);
以上,即可完成一套前端项目的打包。
gulp 配置前端项目打包的更多相关文章
- Android使用gradle不同配置多项目打包
//build.gradle该配置文件里路径均是相对路径 apply plugin: 'com.android.application' android { def suffix = "su ...
- vue2.0 配置build项目打包目录、资源文件(assets\static)打包目录
vue项目默认的打包路径:根目录下的dist文件夹下: 但是在项目开发中,我们肯定希望项目提交到svn目录或者git目录下,否则每次复制过去,太麻烦了: 那怎么配置打包路径呢?下面来看看: 我们找到打 ...
- springboot系列三、springboot 单元测试、配置访问路径、多个配置文件和多环境配置,项目打包发布
一.单元测试 生成的demo里面包含spring-boot-starter-test :测试模块,包括JUnit.Hamcrest.Mockito,没有的手动加上. <dependency> ...
- 前端项目打包工具weexpack的安装
最下面是本人安装时候的系统环境,本篇文章只限于参考,不一定非得是这样,原因你懂得. 打包的过程中出现的问题 1.执行到weexpack run android的时候,到了resolving class ...
- r.js 前端项目打包
目录结构
- pipeline配置前端项目
vue pipeline { agent { label 'master'} options { timestamps() disableConcurrentBuilds() buildDiscard ...
- Django项目引入NPM和gulp管理前端资源
前言 之前写了一篇<Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件>,现在又来用Django开发项目了,之前我搞了一个Django的快速开发脚手架「DjangoSt ...
- 使用jenkins进行前端项目自动部署
前面的话 后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护.一般地,前端项目使用jenkins来进行自动部署,包括打包.测试等一系列流程.本文将详细介绍j ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十四):项目打包部署
项目打包部署 安装MySQL镜像 注意:如果使用docker镜像安装MySQL,也需要在前端部署主机安装MySQL,因为备份还原功能是使用MySQL的本地命令进行操作的. 下载镜像 执行以下命令,拉取 ...
随机推荐
- log4j相对路径找不到,处理方法
http://blog.csdn.net/u012345283/article/details/40821833?utm_source=tuicool&utm_medium=referral
- scala操作符&运行
---恢复内容开始--- #操作符运算 数学操作符 + - * / % 比较操作符 < > >= =< 逻辑操作符 && || 对等操作符 == != 位操 ...
- eclipse中的 Compiler compliance level含义
The compiler compliance setting tells the compiler to pretend it's a different version of Java. The ...
- errorlevel
------siwuxie095 errorlevel 程序返回码 用法:echo %errorlevel% 查看当前程序返回码(即返回值),以知道程序或命令行是否执行成功. DOS在执行完后都有返回 ...
- [html]经验集
禁止默认的右键菜单: window.document.oncontextmenu = function(){ return false;} WebBrowser 控件用法:(手动填充内容) // 首先 ...
- 2016. last day in office
外面黑了,水面上黑魆魆的看不清楚了. 明天请假了,2017年再见! 2017加油! 2017 English improving!
- python集合(set)操作
python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...
- intellij,eclipse,vs2013快捷键
如何跳转到上一次编辑的位置,即如何跳到上一个光标所在的位置? intellij: Command+Alt+左方向键:上一光标的位置 Command+Alt+右方向键:下一光标的位置 定位到最后编辑位置 ...
- Python模块:itertools
itertools模块:循环器 一,无穷循环器:count,cycle,repeat (1)count(5,3) #从5开始的整数循环器,每次增加3,即:5,8,11,14,17... from it ...
- Java 项目优化实战
https://blog.coding.net/blog/java-coding-performance 1 Visual VM 2 优化一 2.1 背景 2.2 原实现 2.3 剖析 2.4 方案 ...