1.2服务器端开发要做的事情 实现网站的业务逻辑 数据的增删改查 1.3为什么选择Node 使用JavaScript语法开发后端应用 一些公司要求前端工程师学握Node开发...解决办法：将Node安装目录添加到环境变量中 ? ? 2.3 PATH环境变量 存储系统中的目录，在命令行中执行命令的时候系统会自动去这些目录中查找命令的位置。 ?...，系统会自动在该路径开辟一个文件 5.3系统模块path路径操作 为什么要进行路径拼接 不同操作系统的路径分隔符不统一 /public/uploads/avatar Windows上是\.../dist/css')); done(); }) 6.9 Gulp插件 gulp-htmlmin: html文件压缩 gulp-csso: 压缩css gulp-babel : JavaScript...// 1.压缩html文件里面的所有代码 // 2.抽取html文件里面的所有公共代码 gulp.task('htmlmin', done=> { // 获取当前目录下src下所有的html文件
gulp定义是：用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本，或者升级历史传统项目，解放你重复打包，压缩，解压之类的操作。...中 在gulp中，任务之间的依赖关系需要我们自己手动写一些执行任务流，现在一些打包后的dist的文件并不会自动注入html中。...参考gulp-inject[1] ... const inject = require('gulp-inject'); ... // 将css,js插入html中 const injectHtml =.../dist/*.html') // 把目标资源插入目标html中，同时输出到dist文件下 const result = targetHtml.pipe(inject(targetSources...用gulp写了一个简单的应用，但是发现中途需要找好多gulp插件，gulp的生态还算可以，3w多个star，生态相对丰富，但是有些插件常年不更新，或者版本更新不支持，比如gulp-image，当你按照官方文档使用最新的包时
1.模块加载及第三方包 1.1.Node.js模块化开发 1 JavaScript开发弊端 ? JavaScript在使用时存在两大问题，文件依赖和命名冲突。 2 生活中的模块化开发 ?...为什么要进行路径拼接 不同操作系统的路径分隔符不统一 /public/uploads/avatar Windows 上是 \ / Linux 上是 / 4 路径拼接语法...9 Gulp插件 gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify...：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 1.html任务 const htmlmin = require('gulp-htmlmin.../src/*.html') // 2.抽取html文件中的公共代码 .pipe(fileinclude()) // 1.压缩html文件中的代码 .pipe(htmlmin
捆绑 捆绑将多个文件合并到单个文件中。 捆绑可减少呈现 Web 资产（如网页）所需的服务器请求数。 可以专门为 CSS、JavaScript 等创建任意数量的单个捆绑。...文件越少，从浏览器到服务器或从提供应用程序的服务的 HTTP 请求就越少。 这会提高第一页加载性能。 缩小 缩小在不更改功能的情况下从代码中删除不必要的字符。...因此，请求的资产（如 CSS、图像和 JavaScript 文件）的大小大幅减小。 缩小的常见副作用包括将变量名称缩短为一个字符、删除注释和不必要的空格。...CSS 缩小程序 JavaScript 缩减程序 HTML 缩小程序 -includeInProject：指示是否将生成的文件添加到项目文件的标记。...手动转换捆绑和缩小工作流以使用 Gulp 将 package.json 文件（包含以下 devDependencies）添加到项目根： 警告 gulp-uglify 模块不支持 ECMAScript
为什么要使用Webpack 与react一类模块化开发的框架搭配着用比较好。 属于配置型的构建工具，比较用容易上手，160行代码可大致实现gulp400行才能实现的功能。...，开发过程中不建议打开 多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin 清理文件夹，Clean 调用模块的别名ProvidePlugin，例如想在js中用$，如果通过...优化点八.多个html怎么办 使用HtmlWebpackPlugin，有多少个html，就排列多少个，记得不要用inject，否则全部js都会注入到html。...如果真的要用inject模式，请务必将不需要的js用exclude chunk去掉或者用chunk参数填上你需要入口文件。...记住，这些资源的路径是在生成目录下的，写路径的时候请写生成目录下的相对路径。 优化点九. html-webpack-plugin不用使inject模式没又md5，而且不支持文件内联怎么破？
（9）Gulp插件 gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify...：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 6、package.json （1）node_modules文件夹的问题 文件夹以及文件过多过碎...（3）项目依赖 在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies...，称为开发依赖 使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中 { "devDependencies":...{ "gulp": "^3.9.1“ } } （5）package-lock.json文件的作用 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 加快下载速度
1 一个打包工具 2 一个模块加载工具 3 各种资源都可以当成模块来处理 4 网站 http://webpack.github.io/ 如今，越来越多的JavaScript...使用这种方式) 4 ES6模块 思考：为什么只有JS需要被模块化管理，前台的很多预编译内容，不需要管理吗？ ...• 能被模块化的不仅仅是JS了。 • 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。 ...，例如Angular、jQuery、mui等； Common类文件，自定义的通用类库，命名规则是hj_common_***.js，原则上目前所有自定义类库可以合并成一个文件，大小不超过...', //html模板路径 template:'m/html/home/productIndex.html', inject: true,
这个 class 添加到 body 标签中，那么这个时候，我们的换肤效果就出来了。...image.png 但是，你发现没，这样只是将我们项目中的 Element-UI 的默认配色改成我们想要的；但是我们要做的是换肤功能，希望颜色是可以切换的。...所以，我们还是用上面的方法，给这个生成的css文件里面的每一个 css 样式加上一个独特的命名前缀，然后换肤的时候，就将这个 class 添加到 body 上面，如此一来，也能实现很丰富的换肤功能（因为我们可以自己配很多套好看的配色...image.png 我们看一下这个工具生成的，或者 配置页面 导出的这个 css 文件，混淆压缩的代码，手动给每一个样式外面包裹一个 class 来做命名空间是不现实的，所以这里要用到一个 gulp 插件...补充说明： js 修改 scss 变量是有方案的，但是在我们项目中无法做到动态换颜色，为什么呢？
但是这儿还有其他工具，broccoli聚焦于资源文件的编译，是一个最常见的构建工具之一。 这儿已经有大量文章覆盖Grunt和Gulp的区别以及为什么你可能使用其中一个。...既然我们已经监视了.scss文件，并重新加载，为什么不更进一步，当HTML文件和JavaScript文件保存后，重新加载浏览器呢？...我们将从优化CSS和JavaScript文件开始。 优化CSS和JavaScript文件 当我们尝试优化CSS和JavaScript文件给生产使用，开发者有两个任务来执行：压缩和串联。...Gulp-useref 连接一定数量的CSS和JavaScript文件在一个单独的文件里，通过寻找一个注释，以“”.他的语法是： --> 的文件的类型。如果你设置type为remove,Gulp将移除整个构件块，而不生成文件。 指的是生成文件的目标地址。
")); } exports.default = build; gulp-rename： 可以便捷的在输出编译产物到文件中时对文件命名进行调整，已适应不同的场景。...： 可以在我们构建 JavaScript 代码后进行压缩来减小输出产物的体积。...(); return src("src/*.js") .pipe(uglify()) .pipe(dest("output")); } gulp-sass： 将我们编写的 sass 文件编译为浏览器可以正常识别的...css 文件，我们要同时安装 sass 和 gulp-sass 插件。...const open = require('gulp-open'); function build() { return src("src/index.html").pipe(open()); }
让我们回顾它的实际工作原理：Angular CLI运行Webpack，它将我们的Angular应用程序编译成JavaScript包并将它们注入到我们的index.html。...如果您对我们为什么这么做感到好奇，可以在Angular的文档中阅读它。...让我们将我们的卡片文本属性添加到卡片组件模板中： [...] {{ card.text }} [...] 现在看看它是如何工作的： ?...并将我们的新组件添加到AppComponent模板中： [...]...也许我们可以将我们之前的API集成添加到我们的Reducer中？但是我们不能，因为我们的Reducer函数应该是一个纯函数。
加速文件 参考了Gulp压缩的基本方案 Butterfly主题文档-Gulp压缩 参考了gulp的优化方案 卓越科技-如何优化博客 参考了Jsdelivr的刷新方案 二兔-解决jsdelivr缓存问题的几个办法...Gulp压缩全站静态资源 gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。...适配方案 在魔改过程中，不可避免的要加载诸多的第三方js，为了加快页面编译速度，可以用异步加载以减少HTML阻塞，也可以将多个js文件合并成一个以减少请求次数。...例如我在主页面放置了card_artitalk侧栏说说插件，而artitalkkey.js是在inject配置项中全局引入，那么，当我切换到文章页后，card_artitalk的HTML结构不再出现，但是...所以此处提供一种思路,将js添加到各自的插件pug下，即可确保js只在有相应页面结构出现的时候才会加载。
服务器端的JavaScript应用了核心语法ECMAScript，但是不操作DOM和BOM，它常常用来做一些在客户端做不到的事情，例如操作数据库、操作文件等。...gulp工具作用 gulp可以处理日常工作流产生的任务： 项目上线时对HTML、CSS、JavaScript文件合并、压缩。 将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行。...压缩并抽取HTML中的公共代码 将HTML文件中的代码进行压缩，并抽取HTML文件中的公共代码 // stpe 01 // 在项目目录下，通过npm工具下载安装gulp-htmlmin插件 // 下载安装压缩...// gulp任务执行成功后，在dist目录可以看到两个压缩后的article.html文件和default.html文件 // 然后打开该文件，可以看到压缩后的代码。...例如，使用“npm install 包名”命令下载的formidable和mime第三方模块，它们会默认被添加到package.json文件的dependencies选项中。
其实Webpack不应该拿来跟Grunt/Gulp比较的，但在本骚年这边它就是承担起了很大一部分工作。...babel-loader将ES6/ES7语法编译生成ES5，当然有些特性还是需要babel-polyfill支持的（Babel默认只转换新的JavaScript句法，而不转换新的API，如Promise...，放在输出目录下，并返其对应的url url-loader在当文件大小小于限制值时，它可以返回一个Data Url html-loader/raw-loader: 把Html文件输出成字符串 html-loader...HtmlwebpackPlugin 功能有下： 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题 可以生成创建html入口文件，比如单页面可以生成一个...(__dirname, 'src/index.html'),inject: 'body'}) 2.
配置文件 ├─ src/ # 开发目录 ├─ html/ # 存放 html 的目录 ├─ app/...serve 命令，gulp 会执行跟 gulp dev 一样的操作并监听源文件，唯一不同的是它在执行后会监听某个端口，一旦有文件改动它会帮你自动刷新浏览器，帮你省下了按 F5 的力气。...// 打包 html 文件 gulp.task('build:html', function(cb) { runSequence( 'include', 'usemin...所以建议该目录下的代码不需要添加到版本控制中。...未解决的问题 开发阶段：对 RequireJs 的路径配置（config.js 与 gulp 中的配置）感到困惑迷糊，多创建一个目录就路径不匹配打包不成功。
Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。...js目录下包含了压缩和未压缩的JavaScript文件，现在我们想要创建一个任务来压缩还没有被压缩的文件，我们需要先匹配目录下所有的JavaScript文件，然后排除后缀为.min.js的文件: gulp.src...让我们看看下面，build任务可以将模板转换成html格式，然后我们希望定义一个watch任务来监听模板文件的变化，并将这些模板转换成html格式。...watcher.add(glob) 将与指定glob相匹配的文件添加到watcher（也接受可选的回调当第二个参数） watcher.remove(filepath) 从watcher中移除个别文件 Reloading...前面提到过，Gulp是为数不多的使用JavaScript开发的构建工具之一，也有其他不是用JavaScript开发的构建工具，比如Rake，那么我们为什么要选择Gulp呢?
在开发 web 项目时，我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件，以便于部署和运行。...gulp 是一个流行的 JavaScript 流的构建工具，可以帮助我们自动化这个过程， 相比webpack， 我个人觉得gulp是一个较为轻量的打包工具了。...本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...在 my-project 文件夹中打开终端，运行以下命令启动 Gulp：gulp此时，浏览器会自动打开 http://localhost:3000/ 并显示您的 index.html 文件。...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。
配置文件添加自定义点击音乐配置项和自定义链接内容。 随机文章功能参考：HCLonely-Hexo博客美化 自己写了个镜像站的跳转动作。能够更好的利用Gitee工具人。预览效果 ?...由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源，将压缩包内的butterfly文件夹复制到[Blogroot]\theme\目录下覆盖现有主题文件夹即可跳过以下教程的前...: javascript:history.go(1); icon2: item3: 后退 link3: javascript:history.go(-1); icon3: item4...中引入mirror.js 修改文件 bug归纳 如果使用了gulp对静态资源进行压缩，由于gulp-babel的加密压缩算法问题，可能造成部署到线上以后右键菜单不显示的bug。...Butterfly_v3.4.0+galmenu.jsjquery jquery[Blogroot]\_config.butterfly.yml inject: head: bottom:
直到今天，这中间经历了许多的坎坷荆棘，我将我的博客搭建的流程分享出来，能为那些博客小石榴们提供一些帮助吧，如果有错的话，请给我留言，我会及时修改，废话不多说，直接上教程。...文件中，新增以下的配置项： githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis..., JavaScript, JQuery, React, Vue.js等] #网站的关键词 author: YangAir #作者，文章版权所显示的 language: zh-CN #网站语言，不填写...自动为所有html文件中外链的a标签生成对应的属性。...html压缩组件 var htmlclean = require("gulp-htmlclean"); //html清理组件 var imagemin = require("gulp-imagemin"
使用场景：分支临时切换 存储临时改动：git stash 恢复改动：git stash pop 2.3 GIT忽略清单 将不需要被git管理的文件名字添加到此文件中，在执行git命令的时候，git就会忽略这些文件...git忽略清单文件名称：.gitignore 将工作目录中的文件全部添加到暂存区：git add ....= require('gulp'); // 使用gulp.task()方法建立任务 gulp.task('first', () => { // 获取要处理的文件 gulp.src('..../dist/css')); }); gulp 插件(下载—>引入—>调用) gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript...语法转化 gulp-less: less语法转化 gulp-uglify ：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
