首页
学习
活动
专区
圈层
工具
发布

给初学者的Gulp教程(译)

:https://github.com/zellwk/gulp-starter-csstricks 译者注:发现这篇文章很棒,所以就翻译了,能力有限,有错误可以指出。...brunch式一个相似的工具,聚焦于资源文件以及它捆绑在一些常用的任务上,像服务器和文件监视器。 最主要的区别是你如何使用他们配置工作流。Gulp配置倾向于更短和更简单,相对于Grunt。...但是问题是,有什么可以让我们不用每次都手动运行gulp sass,将Sass编译成CSS? 监视Sass文件更改 Gulp提供我们一个watch方法,监视是否有文件更改。...既然我们已经监视了.scss文件,并重新加载,为什么不更进一步,当HTML文件和JavaScript文件保存后,重新加载浏览器呢?...如果你设置type为remove,Gulp将移除整个构件块,而不生成文件。 指的是生成文件的目标地址。

4.8K20

Java面试系列9

IllegalMonitorStateException 抛出的异常表明某一线程已经试图等待对象的监视器,或者试图通知其他正在等待对象的监视器而本身没有指定监视器的线程 IllegalPathStateException...InvalidMarkException 当试图重置一个尚未定义其标记的缓冲区时,抛出此未检查的异常。...MonitorSettingException 当监视器设置在运行监视器期间变得无效时由该监视器抛出的异常。...ProviderException 用于 Provider 异常(例如误配置错误或不可恢复的内部错误)的运行时异常,Provider 可以为它创建子类以抛出特殊的、特定于 provider 的运行时错误...),且该异常不可分配给该方法的throws子局声明的任何异常类,则由代理实例上的方法调用抛出此异常。

2.5K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript全栈开发-工具篇

    针对个别项目使用不同的编辑器设置 -- 通过 JSON 文件自定义设置值 -- 跨平台(Windows、Linux 和 Mac OS X) -- 兼容 TextMate 的语言标记语法 2.2 小技巧 -- 文件未保存退出编辑器...开发工具界面的主题和配色也是比较重要,耐看、代码区分一目了然,不刺眼,不引起视觉疲劳。 5....构建工具 在前端开发过程中,经常需合并文件、压缩代码、单元测试、检查语法错误等,需要用手工或不同的工具来完成不同的任务,重复劳动且耗时繁琐,而自动化构建工具可以帮我们自动管理和运行各种任务。...-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb]):监视文件变化执行某些操作,返回可分发change事件的EventEmitter...assert.equal(actual, expected, message) 方法执行 actual 与 expected 的浅拷贝比较(类似于==),相等时不作任何输出,不等的时候输出message,并抛出

    1.9K20

    Gulp折腾之路(III)

    即便笔者在记叙这篇文章时候,也早已是投身于 Webpack 的石榴裙下, 且少使用Gulp了;所以,于此你应该有所考量。...当然,Gulp很强大,辅助完成些脚本,也是很好的存在,譬如生成雪碧图、Sftp服务器上传等;且在2016年中也更新到4.0——一个很吸引人的版本。...gulp-ftp,竟然不能很好地工作。...-- endbuild --> 经过运行一段蛮复杂的gulp脚本之后,以上示例将会被打包成这样(当然这里未使用gulp-rev来做版本控制): ...故而就使得再合并js之后,有可能就不能很好的工作(毕竟执行gulp stream 的顺序,并不会依照写script标签的次序),这就需要额外指定压合并顺序,gulp-order就能很好承担这项工作,示例如下

    1.3K50

    gulp入门(小白级别)

    时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?...构建后的结果file1_2没有txt文件 3.3 gulp.watch() gulp.watch() 用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。...其语法为 gulp.watch(glob[, opts], tasks) @param {string|array} glob 为要监视的文件匹配模式,规则和用法与gulp.src()方法中的glob相同...未安装jshint时,安装gulp-jshint会提示安装依赖 case: 假设在index.js文件中随便制作一个错误,如下在line9敲入无意义字段“aaa”: ?...index.js 然后写入gulp任务,执行即可看到输出的错误提示(如果没有错误,就不会报错提示)。

    1.4K20

    Hexo博客静态资源加速

    优点 能够完全保留图像色彩,不损伤图像质量 1. 压缩程度高,支持转png为jpg或webp,进一步减少图片大小2....PNG转其他格式为不可逆操作(指覆盖保存后),且可能反而会增加图片大小。 使用建议:如果没有特别要求,直接使用Imagine进行有损压缩即可。...虽然说是有损压缩,但是默认压缩会自主计算压缩程度,一般默认程度就能节省70%空间,且肉眼几乎发现不了图片压缩情况。...lighthouse评测推荐使用webp格式图片毕竟都是自家的标准当然要夹带点私活,但是对webp格式图片的浏览器支持依然没有完全普及,在一些未适配的浏览器上(IE:没错,就是老子还在坚持)可能出现无法查看图片的情况...,而artitalkkey.js是在inject配置项中全局引入,那么,当我切换到文章页后,card_artitalk的HTML结构不再出现,但是artitalkkey.js却依然引入,连带着让控制台抛出一堆找不到相应

    3K40

    JGulp: 利用Gulp 配置的前端项目自动化工作流

    也许你还不全懂诸如“前端自动化”“工作流(workflow)”这些名词,不急且让我列举下面的场景: 在刚刚过去的时代(恩对于很多人来说是他们正在经历的时代),小J 同学是这样开发静态网页的:接到项目,新建命名一个项目文件夹...文件清理功能(gulp-clean) 在项目完成可以删除一些多余的文件 任务错误中断自动重传(gulp-plumber) 好吧,“任务错误中断自动重传”是我瞎命名的。...默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流(如在 watch Sass编译时候恰巧 Sass代码写错了)。使用plumber 模块可以在纠正错误后继续执行任务。...,所以本工作流不涉及CSS 压缩等其他功能模块(因为这些功能Compass 本身已经包含)。...当然,本人的认知非常有限,不敢保证上面的东西有没有错误(特别是讲到历史故事那部分),如果有错误欢迎雅正!

    1.2K100

    JavaScript全栈开发-工具篇(上)

    语法高亮,文档查询,重构 -- 快速定位及错误高亮 -- 项目导航及高级重构功能 -- 支持AngularJS、React、Meteor、Express、其它框架 -- 内置前端及服务端NodeJS断点调试器...针对个别项目使用不同的编辑器设置 -- 通过 JSON 文件自定义设置值 -- 跨平台(Windows、Linux 和 Mac OS X) -- 兼容 TextMate 的语言标记语法 2.2 小技巧 -- 文件未保存退出编辑器...开发工具界面的主题和配色也是比较重要,耐看、代码区分一目了然,不刺眼,不引起视觉疲劳。 5....三、构建工具 在前端开发过程中,经常需合并文件、压缩代码、单元测试、检查语法错误等,需要用手工或不同的工具来完成不同的任务,重复劳动且耗时繁琐,而自动化构建工具可以帮我们自动管理和运行各种任务。...-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb]):监视文件变化执行某些操作,返回可分发change事件的EventEmitter

    2.2K10

    前端构建工具gulpjs的使用介绍及技巧

    3.1 gulp.src() 在介绍这个API之前我们首先来说一下Grunt.js和Gulp.js工作方式的一个区别。...时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?...3.4 gulp.watch() gulp.watch()用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。...当代码变化时,它可以帮我们自动刷新页面 该插件最好配合谷歌浏览器来使用,且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。...()方法 gulp.watch('less/*.less', ['less']); }); 如对gulp还有什么不明白之处,或者本文有什么遗漏或错误,欢迎一起交流和探讨~

    2K30

    gulp 详解与使用

    gulp 有庞大的生态圈,且每天都在发展。依靠成千上万可供选择的插件,你可以利用 gulp 自动完成几乎任何事。...下面详细介绍一下: gulp.src() gulp.src() 可以读取你需要操作的文件,相比于 Grunt 主要以文件为媒介来运行它的工作流,gulp 使用的是 Nodejs 中的 stream 流,...时,则表示不匹配方括号中出现的其他字符中的任意一个,类似 js 正则表达式中的用法。 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?...gulp.watch() gulp.watch() 用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。...其语法为: gulp.watch(glob[, opts], tasks); glob 为要监视的文件匹配模式,规则和用法与 gulp.src() 方法中的 glob 相同。

    1.4K10

    最流行的4种前端构建项目工具介绍

    历史上已经有很多分享了,比如 Make 可能是很多解决方案中最知名且是可行的方案。Grunt 和 Gulp 是在是前端的世界中最流行的解决方案,他们两个都有很多非常有用的插件。...Gulp 使用了一个文件流的概念。如果你熟悉 Unix,那么 Gulp 对你来说会差不多,Gulp 会提供你一些简单化的操作。...这里有一个简单的 Gulpfile 的例子: var gulp = require('gulp'); var coffee = require('gulp-coffee'); var concat =...你可以用 Gulp 调用它,此外有很多转换小工具可以让你更兼容的使用(比如 watchify 提供了一个文件监视器帮助你在开发过程中更加自动化地把文件合并起来),这样会省下很多精力。...那么 Webpack 正是做这方面的工作。它会通过配置来取出代码中的依赖,然后把他们通过加载器把代码兼容地输出到静态资源中。

    1.8K30

    Java中常见的异常类型

    java.lang中定义的未检查异常 异常 含义 ArithmeticException 算术错误,如除以零。 ArrayIndexOutOfBoundsException 数组索引超出边界。...IllegalMonitorStateException 非法监视器操作,例如等待解锁的线程。 IllegalStateException 环境或应用程序状态不正确。...IllegalMonitorStateException 非法监视器操作,例如等待解锁的线程。 IllegalStateException 环境或应用程序状态不正确。...java.lang.IncompatibleClassChangeError 不兼容的类变化错误。当正在执行的方法所依赖的类定义发生了不兼容的改变时,抛出该异常。...当验证器检测到某个类文件中存在内部不兼容或者安全问题时抛出该错误。 java.lang.VirtualMachineError 虚拟机错误。用于指示虚拟机被破坏或者继续执行操作所需的资源不足的情况。

    2.9K40

    【读码JDK】-java.lang包介绍

    当应用程序尝试按名称访问枚举常量并且枚举类型不包含具有指定名称的常量时抛出 Error Error是Throwable的一个子类,表示严重的错误,不应该捕获 Exception Throwable的子类...当调用发不正确的调用方法时,抛出该异常 IllegalMonitorStateException 抛出此异常表示线程已尝试在对象的监视器上等待,或者在没有指定监视器的情况下通知在对象监视器上等待的其他线程...在某些类定义发生不兼容的类更改时抛出。...通常,编译器会捕获此错误; 如果类的定义不兼容地更改,则此错误只能在运行时发生。...通常,编译器会捕获此错误; 如果类的定义不兼容地更改,则此错误只能在运行时发生。

    2K20

    Gulp探究折腾之路(I)

    而且大大提高我们的工作效率。...相比于grunt的频繁 IO 操作,gulp的流操作,能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。...js目录下包含了压缩和未压缩的JavaScript文件,现在我们想要创建一个任务来压缩还没有被压缩的文件,我们需要先匹配目录下所有的JavaScript文件,然后排除后缀为.min.js的文件: gulp.src...(W098) //不推荐:定义之而不用之 Use ‘!==’ to compare with ‘’. (W041) //不推荐 “!=”或者”==”做变量是否相等判断。...结果就是,一启动 gulp,哗哗的语法错误提示,根本找不到自己想看的文件检测结果。这时修改一个文件,又对所有文件做了一次全量检测,又是哗哗的满屏错误提示。而我只关心当前修改的文件检测结果。

    2K80
    领券