用Gulp构建css，js项目的基本应用

最新推荐文章于 2024-07-10 10:14:49 发布
最新推荐文章于 2024-07-10 10:14:49 发布
阅读量165 收藏
点赞数
分类专栏： Gulp JavaScript CSS 文章标签： nodejs js css github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq940390/article/details/106023031
版权
JavaScript 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
Gulp
2 篇文章 0 订阅
订阅专栏
CSS
1 篇文章 0 订阅
订阅专栏

一个基于 Windows NodeJs 环境，利用 Gulp 打包构建常规CSS、JS项目的基本应用。

  • CSS支持SCSS，支持 postcss 自动添加兼容性前缀
  • JS支持Babel自动转换
  • 支持JS压缩，CSS压缩
  • 支持生成 SourceMap
  • 支持svg图标生成图标字体
  • 支持静态文件自动复制
  • Build 自动清理dist文件夹
  • 支持本地调试，热重载

使用方法：

  • 克隆项目： https://github.com/qq940390/GulpBase.git
  • 安装： npm install
  • 启动本地调试： npm run server ，可以运行 _run_serve.bat 快速启动调试
  • 最终构建： npm run build ，可以运行 _run_build.bat 快速 Build

配置文件是 gulpfile.js ，可根据自己需要进行更改

子非吾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Gulp编译、合并、压缩，以及Browsersync实时刷新教程
beverley__的博客
02-15 8915
如果你项目比较小，不喜欢保存代码之后按f5刷新，认为压缩打包很繁琐，喜欢追求工作效率，那么这篇教程适合你
gulp编译文件基本操作集囊
loong的博客
04-18 1796
一、简介        gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不尽能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不尽可以很愉快的编写代码，而且大大提高我们的工作效率。        gulp是基于node.js的自动任务运行器，她能自动化地完成JavaScript/coffee/sass/less/html/image...
static-html-starter:使用gulp和tailwindcss的静态html入门
03-26
静态HTML启动器 使用gulp和tailwindcss的静态html入门。 笔记： 强烈建议使用切换节点的版本，以适合不同的项目。 Tailwind CSS需要Node.js 12.13.0或更高版本。 为了确保工作正常，请遵循.nvmrc列表所在节点的版本。 请使用npm而不是yarn来确保所有依赖项都正确安装。 构建设置 # install gulp globally $ npm install -g gulp # install $ npm install # build for production $ gulp build # serve with hot reload at localhost:3000 $ gulp
jsg-global:使用 Tailwind CSS 和 Gulp Js 工作流程构建投资组合网站
05-30
我的个人工作室项目 这就是我的投资组合网站的开始
gulpfile 编译运行_gulpfile.js 文件配置
weixin_42118161的博客
12-23 468
1 //--本地服务器2 var gulp = require('gulp'),3 browserSync = require('browser-sync').create(),4 //SSI = require('browsersync-ssi'),5 reload =browserSync.reload,6 wat...
frontend-dev-starter：由Gulp，Alpinejs，Tailwindcss，Babel，Webpack，SASS和BrowserSync支持的前端开发入门程序
02-03
前端开发入门 由Gulp，Alpinejs，Tailwindcss，Babel，Webpack，SASS和BrowserSync支持的前端开发入门程序。 要求 或或其他节点程序包管理器 产品特点 HTML布局 模块捆绑器 实时重装 图像优化 其他 入门 使用git clone https://github.com/ariakm25/frontend-development-starter克隆此仓库或下载zip。 运行npm install 运行npm run watch以启动开发模式 您的浏览器应在打开 在src文件夹中编辑代码。 运行npm run build编译为生产模式。 将在d
GulpAngularProject:使用gulp构建的angular项目
05-18
**GulpAngularProject** 是一个基于 **Gulp**...总结来说，**GulpAngularProject** 是一个展示如何使用Gulp构建和优化Angular应用的实例，它通过自动化任务管理，提高了开发效率，保证了代码质量，并且优化了应用性能。
gulp-boilerplate：使用Gulp.js构建Web项目的样板
02-03
Gulp样板 用构建Web项目的样板。 使用Gulp4.x。 产品特点连接，最小化和整理JavaScript。 编译，缩小，自动前缀和Lint Sass。 优化SVG。 将静态文件和文件夹复制到dist目录中。 自动将标题和项目详细信息添加到JS和...
githubGulpTM:基于gulp构建mobileWeb项目
04-29
基于gulp构建mobileWeb项目 使用 1.下载githubGulpTM 2.cd到githubGulpTM目录，执行 npm install 安装package.json中已经配制好插件（如下 "browser-sync": "^2.23.6", "del": "^3.0.0", "gulp": "^3.9.1", "gulp-...
基于requirejs+CSS+html+gulp的项目模板
02-19
【Gulp.js】：Gulp是一个自动化任务运行器，可以自动化项目的构建流程，包括编译CSS和JavaScript、合并文件、压缩资源、图片优化、自动刷新等。使用Gulp.js可以极大地提高开发效率，减少重复劳动，并确保构建过程的...
gulp-with-tailwindcss：带有TailwindCSS入门套件的Gulp
02-03
带有TailwindCSS入门套件的Gulp 咕嘟咕嘟与TailwindCSS入门套件-回购协议，让您的开发变得更容易使用预定义一饮而尽任务，帮助您使用简单NPM命令 用法 安装开发依赖 npm install 开始开发和服务器进行实时预览 npm run dev 为生产服务器生成缩略文件 npm run prod 组态 要更改文件和目标/构建文件夹的路径，请编辑config.js文件中的选项 { config: { ... port: 9050 // browser preview port }, paths: { root: " ./ "
gulp-tailwind
05-19
Gulp + Tailwind项目框架 目录 :laptop: 运行开发服务器 您将需要在计算机上安装 ，然后运行： npm install npx gulp Develop开发 编码风格 使用建议的编码样式。 结构 HTML文件位于/src/ 。 .njk文件是模板（ ）文件。 CSS文件位于/src/css/ 。 TypeScript文件位于/src/ts/ 。 除非另有说明，否则文件按字母顺序串联。 按ctrl + C停止服务器。 :rocket: 部署 运行npx gulp build 。 /dist/文件夹包含生产网站。
tailwindcss-gulp-starter：Tailwindcss postcss gulp浏览器同步启动器
02-03
Tailwindcss Gulp起动器 npm i tailwindcss gulp gulp-postcss autoprefixer browser-sync -D ./node_modules/gulp/bin/gulp.js
gulp使用心得（安装编译es6文件）
github_39051926的博客
06-11 2097
1.全局安装gulp输入npm install gulp -g命令，然后用 gulp -v查看是否安装完成；2.新建package.json文件进入你的本地项目（我的是F:\shijiebei\apps\Apps.Web），输入npm init命令，其中 name, version, description必填，其他无所谓，填完后保存，在testgulp项目下就会生成package.json文件；...
gulp来处理html、css、js资源啦
hello ice cream
07-31 384
html文件通过插件对代码压缩less文件使用插件gulp-less解析，css文件兼容性通过处理js文件使用gulp-babel进行代码转换，压缩代码配合魔法注释将资源添加到html页面中和watch为编译开启自动服务串行和并行组合任务以上就是gulp处理html、css、js资源的介绍，更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~httpshttpshttpshttpshttpshttps。...
为什么使用gulp？
珍妮的小罐君
07-20 3483
关于JavaScript和CSS更改后需要手动清除缓存的问题         我们做网站开发的时候，避免不了Javascript和CSS文件， JavaScript和CSS属于静态文件，如果项目地址不变，浏览器会缓存这些文件，那就意味着当我们修改JS或者CSS文件的时候，发现需要清除一下缓存（ctrl+shift+delete），才能看到真实的效果。 关于JavaScript和CSS多个文件执...
Gulp编译、合并、压缩
Martian
06-21 8762
前段时间写过一篇文章介绍Gulp和Grunt的区别[Gulp和Grunt]，有兴趣的可以看一下，这里简单介绍一下Gulp如何配置编译less文件，合并生成的css文件以及压缩css文件。一、准备工作需要安装一下gulp插件： 前提是安装了node与npm模块。2. gulp 3. gulp-less #less 4. gulp-concat 5. gulp-minify-css 6. gulp-r
gulpfile 编译运行_Gulp基本使用
weixin_34304538的博客
01-14 709
>[ Gulp.js](https://www.gulpjs.com.cn/) 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。1.基本使用```npm i gulp-cli -gnpm i gulp -Dcnpm i gulp gulp-uglify gulp-concat```2.创建文件gulpfile.js键入如下```const gulp = require...
scss概念及使用
最新发布
m0_74293254的博客
07-10 1136
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
PostCSS技术概述
04-22
"本文将对PostCSS技术进行深入讲解，涵盖其简介、安装与使用、核心概念、插件系统、自动添加前缀、代码优化、兼容性和社区支持以及实际应用场景。" PostCSS是一种用于转换和优化CSS的插件系统，它使开发者能够使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值