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的本地命令进行操作的. 下载镜像 执行以下命令,拉取 ...
随机推荐
- 使用MLeaksFinder检测项目中的内存泄露
github地址:https://github.com/Zepo/MLeaksFinder MLeaksFinder使用简单方便,可以帮助你在开发时发现内存泄露你的iOS应用.它可以自动发现和UIVi ...
- List<Object> to JSONArray一
package com.beijxing.TestMain; import java.util.ArrayList; import java.util.List; import com.beijxin ...
- matlab图
.6 统计作图 4.6.1 正整数的频率表 命令 正整数的频率表 函数 tabulate 格式 table = tabulate(X) %X为正整数构成的向量,返回3列:第1列中包含X的值第2列为这些 ...
- 日常维护sql
修复mysqlcheck -u -p --repair pmdb prefix="/export/data/mysql/bin/mysql -u -p -e" domain=机房 ...
- oracle 队列
Oracle 高级队列(AQ) 适用对象:初步了解oracle高级队列人群 注意事项: 序号 注意事项 1 JMS监听部分可参考官方文档: http://docs.oracle.com/cd/e128 ...
- Spark RDD aggregateByKey
aggregateByKey 这个RDD有点繁琐,整理一下使用示例,供参考 直接上代码 import org.apache.spark.rdd.RDD import org.apache.spark. ...
- android中的requestFocus标签
<requestFocus />标签用于指定屏幕中的焦点View 用法:置于Views标签内部 ex: <EditText android:id=" ...
- Ubuntu 试用Android L版本
Android L是最近google一个大更新的版本,目前google开发了android L的开发者预览版本,对于一个android 开发者来说很定是要下载下来体验一把,顺便也要了解一下Androi ...
- PC和HOST之间文件传送
从PC到HOST 文件传送表(*.srl) C:\123.txt text ~'LIANG.TEST.LIB.123' 批处理文件(*.bat) SEND "PC文件全路径" 'H ...
- linux不知道文件在哪,想查找文件内的字符串
find . -name "*.*" |xargs grep "xxx"