在开发 web 项目时，我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件，以便于部署和运行。...本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...('gulp');const cssmin = require('gulp-cssmin');const uglify = require('gulp-uglify');const browserSync...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。
现在让我们继续向前，以及学习如何使用Gulp配置一个工作流 我们要配置什么 在看完这篇文章后，你将拥有一个工作流，来进行我们文章开始所说的一些任务： 生成一个Web服务器 当一个文件保存时，浏览器自动刷新...我们能做到，通过给watch任务添加第二参数。...// ... }) 在这种情况下，我们添加了browserSync任务。...如果你设置type为remove,Gulp将移除整个构件块，而不生成文件。 指的是生成文件的目标地址。...我们已经将第一个任务集集合到一个简单的工作流，通过gulp watch命令： gulp.task('watch',['browserSync','sass'], function(){ //...watchers
如果你对Grunt 足够熟悉，就会注意到，Gulp和Grunt的工作方式很不一样。...例如，在执行一系列任务和调用一个函数时，你就可以在返回的watcher中添加监听change事件: var watcher = gulp.watch('templates/*.tmpl.html', [...当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。...使用LiveReload的话，你就需要在每次改变代码之后还需要点击四次，而当你修改CSS时，插入一些变化时，BrowserSync会直接将需要修改的地方添加进CSS，就不用再点击回退。 ?...实际上BrowserSync对于Gulp并不算一种插件，因为BrowserSync并不像一个插件一样操作文件。然而，npm上的BrowserSync模块能在Gulp上被直接调用。
基于 gulp 的前端构建 之前使用 Grunt 时总结了一篇「基于 Grunt 的前端构建」。...当然在同时开上多个浏览器测试页面时它将会很有帮助。...所以接下来的工作就是职责分工，独立完成各自的构建工作。...所以建议该目录下的代码不需要添加到版本控制中。...上线打包阶段：RequireJS 若添加第三方库，需要手动修改 gulp 代码。
咱们学习使用Gulp的目的是提升开发效率，把开发过程中重复性的工作交给Gulp，让Gulp按照你的配置去完成操作。 Gulp本身给开发者提供了5个API接口，可以根据这些接口来开发Gulp插件。...https://registry.npm.taobao.org； 提醒：安装完后最好查看其版本号cnpm -v或关闭命令提示符再重新打开，防止使用时出现问题；另外，cnpm跟npm用法完全一致，只是在执行命令时将...browser-sync是一款浏览器同步测试工具，可以单独使用，也可以插入到Gulp、Grunt等工作流里使用，该篇文章主要介绍browser-sync在Gulp中的使用。...= require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload...') var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload
default 默认任务 当我们运行 gulp 命令时，Gulp 将会执行 default 默认任务，而该任务具体代码如下所示： // default.js const gulp = require(.../config').watch; gulp.task('watch', ['browsersync'], () => { gulp.watch(config.styles, ['styles'...而通过 w3cplus 的 PostCSS 深入学习系列文章 进行学习 stylelint 是一个代码审查插件，除了审查 CSS 语法外，还能审查类 CSS 语法，帮助我们审查出重复的 CSS 样式、不规范的代码...，能够把一些小的 icon 转换成 base64 编码，因为图片转换后会比原尺寸大 30% 左右，所以不推荐将尺寸较大的图片进行 base64 编码转换 // base64.js const gulp.../config').browsersync; gulp.task('browsersync', ['build'], () => { browsersync.init(config.development
而且大大提高我们的工作效率。...相比于grunt的频繁 IO 操作，gulp的流操作，能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。...js/app.js 从匹配结果中排除js/app.js，这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用 *....列举些常见不推荐的写法，运行时提醒如下： Missing semicolon....(W098) //不推荐：定义之而不用之 Use ‘!==’ to compare with ‘’. (W041) //不推荐 “!=”或者”==”做变量是否相等判断。
更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 无论您是前端还是后端工程师，使用它将提高您30%的工作效率。...browser-sync start --server --files "**/*.css, **/*.html" 7.如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync...Image.png 2.安装gulp: npm i gulp --save ?...Image.png var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload...= browserSync.reload; // 静态服务器 // 设置静态目录 gulp.task('start', function() { browserSync.init({
LESS编译 压缩 --合并没有必要，一般预处理CSS都可以导包 gulp.task('style', function() { // 这里是在执行style任务时自动执行的 gulp.src(....pipe(browserSync.reload({ stream: true })); }); var concat = require('gulp-concat'); var uglify....pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(browserSync.reload({ stream....pipe(browserSync.reload({ stream: true })); }); var htmlmin = require('gulp-htmlmin')...: true, removeComments: true })) .pipe(gulp.dest('dist')) .pipe(browserSync.reload(
不过不用担心，这两个毕竟只是一个工具，在初始时没有必要特别的了解它们的工作原理，只要能运行起来就可以。等到使用了一段时间之后，自然而然的就知道该如何配置了。...这里主要记录一下项目中使用的配置，如果想要系统的学习如何使用这两个工具，可以参考下面的文章： Gulp入门教程 一小时包教会 —— webpack 入门指南 Gulp 和 Webpack 集成 Gulp...下面是具体的配置 var gulp = require("gulp"); var browserSync = require('browser-sync'); // 添加 browserSync 任务...js", browserSync.reload); gulp.watch("dist/**/*.css", browserSync.reload); }); // 添加到默认任务 gulp.task...('default', ['browserSync', 'watch', 'webpack']); Webpack 配置 我们使用 webpack 进行资源打包的工作，就是说将各种资源（css、js、图片等
当然这个懒，不是指那种当个纯粹的搬运工（CTRL+C,CTRL+V大神）,而是用更少的时间去完成日常的工作任务。正是为了更“懒”、更爽、更有逼格的写代码，才有了这篇文章。...有关具体GULP的介绍，请参考GULP：https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 珍惜键盘，远离F5 - Browsersync...Browsersync官网：https://www.browsersync.io/ 光说不练假把式 - 手把手带你起飞 STEP-1：准备好各种环境 首先你得有nodejs环境，然后你得全局安装GULP...，http-server,browsersync，如下所示： ?...STEP-5: 懒人第一阶段完成，好了不写了，我要去好好搬砖了
gulp定义是：用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本，或者升级历史传统项目，解放你重复打包，压缩，解压之类的操作。...seriseTask时 已经在dist生成对应的文件了 编译转换es6 在我们index.js，很多时候是写的es6，在gulp中我们需要一些借助一些插件gulp-babel,另外我们需要安装另外两个...,所有的自动化工作流操作都牢牢的掌握在自己手上，你可以用gulp写一些自动化脚本，比如，文件上传，打包，压缩，或者改造传统的前端应用。...用gulp写了一个简单的应用，但是发现中途需要找好多gulp插件，gulp的生态还算可以，3w多个star，生态相对丰富，但是有些插件常年不更新，或者版本更新不支持，比如gulp-image，当你按照官方文档使用最新的包时...即使项目时间再多，也不要用gulp搭建前端应用，因为webpack生态很强大了，看gulp的最近更新还是2年前，但是写个自动化脚本，还算可以，毕竟gulp的理念就是用自动化构建工具增强你工作流程，也许当你接盘传统项目时
Bower就是用来管理项目中所有的依赖，主要用于Web页面开发时使用的包管理，比如jquery，bootstrap Bower常用命令 1、初始化一个Bower的配置文件 --- $ bower init...gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率...gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。.../%E5%9C%A8gulp%E4%B8%AD%E4%BD%BF%E7%94%A8browsersync/ browsersync使用 gulp是引入开发过程中的一些小工具，生产模式不需要gulp http...6、在Gulp中使用BrowserSync BrowserSync可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。
光说不练假把式，我们就开发一款基于Vue技术栈的全栈热重载生产环境脚手架。 实战 一、初始化项目 首先，我们建一个空文件夹，名字可以叫gulp-vue-cli，这就是项目根文件夹。...const gulp = require('gulp'); // 创建任务 // 第一个参数: 任务名 // 第二个参数: 回调函数,当我们执行任务时就会执行这个函数 gulp.task('test'...无论您是前端还是后端工程师，使用它将提高您30%的工作效率。...const gulp = require('gulp'); const browserSync = require('browser-sync').create(); const nodemon = require...// 创建任务 // 第一个参数: 任务名 // 第二个参数: 回调函数,当我们执行任务时就会执行这个函数 gulp.task('test', function(){ console.log('
（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...）package-lock.json文件的作用 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可...，不需要做额外的工作
前言 我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1… 本次目标 es6 转换成 es5 图片压缩 scss编译 模板html...--dev yarn add @babel/core @babel/preset-env --dev 复制代码 然后gulpfile.js进行一些添加操作 const babel = require(...(style, script, page, image, font) module.exports = { compile } 复制代码 文件清除 做完这些，我们还需要做一些比较人性化的工作，我们每次打包的时候的文件删除...> { return sass } } }) 复制代码 热更新 不多比比直接上 npm i browser-sync --dev 复制代码 gulpfile.js const browserSync...= require('browser-sync') const bs = browserSync.create() ... const serve = () => { bs.init({
编写风格不统一，导致代码可读性差，增加后期维护成本与沟通成本； HTML和CSS代码冗余，增加了重构开发成本和页面打开速度； 项目开发周期长，缺少公共与私有框架的规划，同样会增加后期维护成本与开发成本，...，并且打开谷歌LiveReload工具 优化： 因为LiveReload并不是特别好使用，所以用 Browsersync 来替代LiveReload，Browsersync的功能更全更方便。...，可能还得指出具体位置； 组件强调复用，在重构新的页面时，对公共组件部分还得进行再重构，增加了重构的开发时间； 实现方式： HTML：Gulp-content-includer 将静态HTML进行模块化开发...然后发现每次页面在后期联调维护的时候，因为上传环境复杂，需要花很多没必要的时间在跳板机上传上，增加了工作量。 管理后台有哪些功能？ 文件上传 整个管理后台是以图片和CSS的上传与管理为基础围绕展开。...如果做到gulp中，会不方便后期的改版维护，在发布时，因为都是压缩过的CSS代码，不便和线上进行对比。虽然有SVN，但是为了保证一切以线上为主的基础，还是会对线上的代码进行对比。
换句话说，只要把静态资源缓存下来，在缓存有效的时间内，用户访问网站时静态资源是从浏览器缓存里面加载而不是从服务器加载过来。如果想进一步了解“网站缓存”，可以发送关键字缓存到HTML5学堂公众号。...为静态资源请求添加Query 这个理解起来比较简单，就是在静态资源请求后面添加参数，这个参数的值是时间戳和版本号的结合，当然也可以使用其它方式来计算该参数的值。 修改前 Gulp安装好的插件 require('模块名称') var gulp = require('gulp'); var browserSync = require('browser-sync').create...(); var reload = browserSync.reload; var concat = require('gulp-concat'); var cleanCSS = require('gulp-clean-css...浏览器自动刷新 gulp.task('f5', function(){ browserSync.init({ server:{ baseDir:'./'
gulp = require("gulp"); var livereload = require("gulp-livereload"); gulp.task('watch',function(){...browserSync = require("browser-sync"); gulp.task('watch',function(){ livereload.listen(); gulp.watch...('browser-sync',function(){ browserSync.init({ server:{ baseDir:"./" } }) }) 命令行执行： gulp....livestyle：http://livestyle.io 2.livereload : http://livereload.com 3.browser-sync : http://www.browsersync.io...如果碰到这个报错，一般是编译用的python没有安装 安装完这个后再安装emmet即可 安装好后就能看到emmet插件 继续安装livestyle插件，需要一点时间
git 你是谁，在向 git 仓库中提交时需要用到。...，临时转向其他工作。...git忽略清单文件名称：.gitignore 将工作目录中的文件全部添加到暂存区：git add ....克隆远端数据仓库到本地：git clone 仓库地址 3.4.2 拉取远程仓库中最新的版本 拉取远程仓库中最新的版本：git pull 远程仓库地址 分支名称 3.5 解决冲突 在多人同时开发一个项目时，...语法转化 gulp-less: less语法转化 gulp-uglify ：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步
云服务器
ICP备案
云直播
即时通信 IM
对象存储
