gulp打包requirejs项目

本文介绍了在传统PC页面项目中,如何利用gulp和requirejs进行模块化打包。作者分享了已完成的工作,包括js的babel编译、es6语法检查、scss编译以及requirejs加载css和添加文件版本号。同时,文章也提到了项目存在的不足,如requirejs加载优化和cdn处理未完善,并提供了项目的github地址。
摘要由CSDN通过智能技术生成

源起

现在开发,都追求用webpack进行模块化打包开发。即使是在传统的pc页面项目上,也可以用webpack来做多页面的项目打包。
最近在和一个客户交流接触,感觉到不同情境下的需求真的差异很大。有的时候,真的是需要用jquery+bootstrap来做开发。这个时候,要做模块化打包,也就只有选中requirejs和seajs了。
我之前在别的项目上,使用过一些requirejs,也就在这里统一使用requirejs

完成情况

  • 对js实现了babel编译
  • 对用es6写的业务代码进行eslint语法检测
  • 对scss编译
  • requirejs 可以加载css文件
  • 对需要加载的js和css文件添加版本号

项目目录

gulp项目目录

gulp 文件

const gulp = require('gulp')
const rjs = require('requirejs')
const clean = require('gulp-clean')
const browserSync = require('browser-sync')
const proxyMiddleware = require('http-proxy-middleware')
const sass = require('gulp-sass')
const sourcemaps = require('gulp-sourcemaps')
const uglifyJs = require('gulp-uglify')
const rev = require("gulp-rev")
const revReplace = require("gulp-rev-replace")
const htmlmin = require('gulp-htmlmin')
const jsonEditor = require('gulp-json-editor')
const babel = require('gulp-babel')
const eslint = require('gulp-eslint')
const sequence = require('gulp-sequence')
const fileInclude = require('gulp-file-include')
const reload = browserSync.reload
const proxy = proxyMiddleware('/services', {target: 'http://localhost:8080', changeOrigin: true})
/* scss 编
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值