对现代开发者而言，即使是构建一个很简单的web应用，也要编写很多任务，比如压缩图片、最小化CSS和JavaScript文件、移除调试代码、运行单元测试以及处理很多其它不计其数的任务。...在本节中，我们会展示如何创建并执行与Laravel应用紧密结合的Elixir任务，但在这之前，可能很多人还不太了解什么是Gulp，所以我们将从这里开始，逐一为你解开Elixir的面纱。...在该文件中，可以看到一个Gulp任务示例： elixir(function(mix) { mix.less('app.less');}); mix.less 任务可以用于编译Less文件，在本例中该文件名为...（elixir）中，这意味着几个简单的键盘敲击就可以处理多个重复恼人的任务。...你可以通过在项目根目录下运行 gulp 命令来执行定义在 elixir 方法中的任务： $ gulp [13:16:18] Using gulpfile ~/Software/dev.todoparrot.com
sort方法接收一个函数作为参数，这里嵌套一层函数用来接收对象属性名，其他部分代码与正常使用sort方法相同. var arr = [ {name:'zopp',age:0}, {name...value2 = b[property]; return value1 - value2; } } console.log(arr.sort(compare('age'))) 如何根据参数不同...//数组根据数组对象中的某个属性值进行排序的方法 //使用例子：newArray.sort(sortBy('number',false)) //表示根据number属性降序排列;若第二个参数不传递...，默认表示升序排序 //@param attr 排序的属性 如number属性 //@param rev true表示升序排列，false降序排序 sortBy: function
三、构建工具 在前端开发过程中，经常需合并文件、压缩代码、单元测试、检查语法错误等，需要用手工或不同的工具来完成不同的任务，重复劳动且耗时繁琐，而自动化构建工具可以帮我们自动管理和运行各种任务。...Grunt常用API -- grunt对象：Grunt通过将grunt对象赋值给module.exports函数，将grunt对象的属性和方法传递给Gruntfile、Grunt模块和task文件中 -...1.3 Grunt任务的运行 1) 运行方式1：Grunt命令行方式执行 命令行进到项目根目录，执行grunt命令，命令格式：grunt 模块名:目标名，未指定模块名，目标名将依次执行相应模块及相应目标...2.3 Gulp运行 1) 运行方式1：Gulp命令行方式执行 项目根目录，执行gulp命令，命令格式：gulp ，未指定任务名，执行所有任务。...安装完成后 -> 快捷键ctrl+shift+p（或Tools -> Command Palette）运行命令行 -> 选中Gulp命令 -> 选中任务 -> 完成执行。 3.
构建工具 在前端开发过程中，经常需合并文件、压缩代码、单元测试、检查语法错误等，需要用手工或不同的工具来完成不同的任务，重复劳动且耗时繁琐，而自动化构建工具可以帮我们自动管理和运行各种任务。...多次调用dest将多次输出到多个目录，目录不存在则创建 -- gulp.task(name [,deps], fn)：指定任务名及任务函数来定义任务。default为Gulp默认执行的任务。...2.3 Gulp运行 1) 运行方式1：Gulp命令行方式执行 项目根目录，执行gulp命令，命令格式：gulp ，未指定任务名，执行所有任务。...2) 运行方式2：开发工具IDE方式执行 1> WebStorm 打开项目代码，右键点击 Gulpfile.js 文件 -> 点击Show Gulp Tasks菜单项 -> 出现Gulp任务列表 ->...安装完成后 -> 快捷键ctrl+shift+p（或Tools -> Command Palette）运行命令行 -> 选中Gulp命令 -> 选中任务 -> 完成执行。 3.
，而是一个虚拟的文件对象流 (Vinyl Files)，存储着原始文件的路径、文件名、内容等信息NodeJS 安装Gulp 是基于 NodeJS，所以需要安装 Node 和 npm 包管理工具，可根据自己的操作系统环境来下载相应的版本...节点有了 package.json 的配置信息之后，我们就可以通过 npm-install 命令，一键下载 package.json 配置信息里的所有插件包如果需要删除插件包，可执行 npm uninstall...less 的任务，以实现不同的需求，当任务有多个，为实现某一需求而运行所有任务显然是不可取的，我们可通过 gulp + 任务名的方式来运行指定的任务，而不会触发其他任务除了我们定义的 less 任务外...，我们还定义了一个 default 默认任务，这对 Gulp 来说是必须的，当我们输入 gulp 命令时，将会自动执行 default 任务，在上面这个例子中，我们先是执行了 less 任务，再执行了...，便会运行回调定义的其他任务gulp.task('default', () => { gulp.watch('src/less/*.less', function(){ gulp.run
// 使用数组的方式来匹配多种文件 gulp.src(['js/*.js','css/*.css','*.html']) 使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上...gulp.task() gulp.task 方法用来定义任务，内部使用的是 Orchestrator ，其语法为： gulp.task(name[, deps], fn) name 为任务名，如果你需要在命令行中运行你的某些任务...deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。 fn 为任务函数，我们把任务要执行的代码都要写在里面。...gulp 中执行多个任务，可以通过任务依赖来实现。...--silent 禁止所有的 gulp 日志 命令行会在 process.env.INIT_CW 中记录它是从哪里被运行的。
-–save-dev gulp-uglify来安装gulp-uglify，最后通过运行gulp minify来执行任务。...Grunt不使用数据流，而是使用文件，对文件执行单个任务然后保存到新的文件中，每个任务都会重复执行所有进程，文件系统频繁的处理任务会导致Grunt的运行速度比Gulp慢。...为了确保一个任务在另一个任务执行前已经结束，可以将函数和任务数组结合起来指定其依赖关系。...细心的读者可能会发现，程序中JSHint插件执行了2次，这是因为第一次执行JSHint只是给文件对象附加了jshint属性，并没有输出。...使用gulp.watch()方法可以监听文件，它接受一个glob或者glob数组（和gulp.src()一样）以及一个任务数组来执行回调。
文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为...Grunt主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务...('two is done'); }); 上面的例子中我们执行two任务时，会先执行one任务，但不会去等待one任务中的异步操作完成后再执行two任务，而是紧接着执行two任务。...所以two任务会在one任务中的异步操作完成之前就执行了。 那如果我们想等待异步任务中的异步操作完成后再执行后续的任务，该怎么做呢？...opts 为一个可选的配置对象，通常不需要用到 tasks 为文件变化后要执行的任务，为一个数组 gulp.task('uglify',function(){ //do something });
dependencies字段指定了项目运行所依赖的模块。它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。...npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。...deps 类型： Array 一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。 fn 该函数定义任务所要执行的一些操作。...2.gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) 3.gulp.dest(path[, options]) 处理完后文件生成路径...此时您可以运行第一个任务。运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中： gulp scss 请注意，在本示例中，我们指定了要运行的任务。
2.4 运行gulpfile.js文件 要运行gulp任务，需切换到存放gulpfile.js文件的目录，然后在命令行中执行gulp命令。...case2 执行多个任务 gulp中执行多个任务，可以通过任务依赖来实现。...gulp mytask 执行结果 如果任务相互之间没有依赖，任务会按照['task1', 'task2', 'task3']数组中任务的排序来执行，如果有依赖的话则会先执行依赖的任务。...b*.js', '*.js']) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中 展开模式 展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果...@param {} opts 可选的参数对象，通常用不到 @param {array} tasks 为文件变化后要执行的任务，为一个数组 gulp.task('uglify',function(){
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新...： 2 运行gulp任务 要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，...gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。...3.watch gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。...opts 为一个可选的配置对象，通常不需要用到。 tasks 为文件变化后要执行的任务，为一个数组。
1.3 Node.js基础语法 通过node命令解析和执行一个js脚本文件的步骤如下： 根据node命令指定的文件名称，读取js脚本文件。 解析和执行JavaScript代码。...Node.js代码的运行环境存在window对象吗? 在Node.js代码的运行环境中没有DOM和BOM，因此也就不存在window对象。 那么使用的console.log()是来自于哪里呢？...; 在命令行工具中执行gulp任务。...// gulp first // gulp命令后跟first任务名，表示gulp命令会自动去当前的项目根目录下查找gulpfile.js文件 // 然后在这个文件中再去查找first任务，找到后自动执行...5.6 执行全部构建任务 我们通过使用命令“gulp 任务名”去执行单个任务，那么如何实现执行一个任务，其他任务也一起执行呢？
如果是AS语言的开发者，可以拖动FB或FD的可执行文件进行关联。总之，第二行就是代码编辑器可执行文件的启动关联路径。开发者可根据自己的实际使用情况进行关联。...不要使用VSCode中的tsc编译任务，因为VSCode中的tsc编译与LayaAirIDE的编译及发布流程不一致，所以会有很多地方都要修改，编译后才能运行成功，而且就算是在VSCode中运行成功了，如果修改的和...直接给命令行设置快捷键是通过VSCode做不到的。但是，我们可以在任务里去执行命令行的相关指令。然后修改执行任务的快捷键，并指定默认运行的任务名称，就可以实现VSCode快捷键的绑定。...打开键盘快捷方式后，先在顶部搜索task，找出任务相关的快捷方式，再找到 运行任务（Run Task）双击，设置快捷键 Ctrl + F8 （可按自己的习惯设置一个不冲突的快捷键即可），回车即完成运行任务的快捷键绑定...以后，我们就可以在VSCode中直接使用Ctrl+F8编译，F5断点运行，这个快捷的编码工作流了。 六、用gulp监听实现自动执行编译 如果开发者觉得快捷键编译还不够，想实现实时编译，也是可以做到的。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新...把目录切换到你的项目文件夹中，然后在命令行中执行： npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev： npm ...2.运行gulp任务 要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，gulp...后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。...(3)最后在终端中转到我们的项目目录，运行gulp命令，这样就可以在终端中查看结果了。
gulp 简介 gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码...5、全局安装gulp 5.1、说明：全局安装gulp目的是为了通过她执行gulp任务； 5.2、安装：命令提示符执行cnpm install gulp -g； 5.3、查看是否正确安装：命令提示符执行...fn：回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options...]) 处理完后文件生成路径 9、运行gulp 9.1、说明：命令提示符执行gulp 任务名称； 9.2、编译less：命令提示符执行gulp testLess； 9.3、当执行gulp default...10、使用webstorm运行gulp任务 10.1、说明：使用webstorm可视化运行gulp任务； 10.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show
gulp 简介 gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码...5、全局安装gulp 5.1、说明：全局安装gulp目的是为了通过她执行gulp任务； 5.2、安装：命令提示符执行cnpm install gulp -g； 5.3、查看是否正确安装：命令提示符执行gulp...fn：回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options...]) 处理完后文件生成路径 9、运行gulp 9.1、说明：命令提示符执行gulp 任务名称； 9.2、编译less：命令提示符执行gulp testLess； 9.3、当执行gulp default或...10、使用webstorm运行gulp任务 10.1、说明：使用webstorm可视化运行gulp任务； 10.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp
# 创建code文件夹 mkdir code # 进入code文件下 cd code 3.执行下面的命令创建package.json文件 npm init 在命令行中运行npm init命令的时候会出现下图所示的要求用户输入...: scripts属性是一个对象，里边指定了项目的生命周期个各个环节需要执行的命令 author: 项目的作者 license: 项目的许可证 devDependencies: 项目依赖的插件 repository...文件，表示文件拷贝任务运行成功 5.自动执行文件拷贝任务 在这个文件拷贝任务中，有一个非常大的弊端，就是每次更新index.html中的代码的时候，都要在命令行中执行一次gulp copy命令，这样做做了重复性操作...，也不符合使用Gulp实现自动化的特点，为了改成自动化执行文件拷贝命令，可以修改gulpfile.js中的代码 //载入gulp模块 var gulp = require('gulp'); //文件拷贝任务...index.html文件发生变化的时候 //执行copy任务 gulp.watch('src/index.html', ['copy']); }); 6.修改好gulpfile.js中的代码后在命令行中执行下面的命令
gulp gulp是基于流的前端构件化工具。gulp是自动化项目的构建利器；不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。同时使用非常简单，学习成本低。...具体下载直接百度nodejs中文网，根据自身的环境（windows linux mac）下载安装包（msi）。直接进行安装。...gulp 创建gulpfile.js文件 // 以下代码会执行在node环境下 var gulp = require( "gulp" ); // 创建一个gulp的任务 gulp.task( "default.../dist/css/")) }); 新建dist文件夹来存放生成的css任务 执行 gulp css ?...使用gulp 压缩代码能使项目运行更加的流畅。 ? 最后，祝有所学习，有所成长
= require('q'); //- 用于解决任务执行顺序的问题（一个任务执行完毕才执行另外一个任务）（暂时还没用到） /*清理文件*/...() { //- compress-css和compress-js任务执行完毕再执行rev-index任务 /*修改index.html文件的link标签和script标签引用的...; //压缩后的图片输出的位置 }); /*最终执行的任务-css*/ gulp.task('rev',['rev-html','compress-img']); //************...gulp命令 运行如下命令：gulp rev ?...第六步：代码的改动 如果后续代码有改动的话，执行一次gulp clean命令，再执行一次gulp rev 命令： gulp clean命令就可以把dist目录下生成的所有文件全部删除，gulp rev命令会根据新的代码重新生成所有文件到
({ }); }; 在上文的方法中，添加clean任务，这个配置可以添加一个数组来定义要清理的目录或者文件 module.exports = function (grunt) {...']); 现在你可以在Task Runner Explorer中找到一个名为all的别名任务，运行它即可顺序执行上文中的所有任务了 ?...监测文件变化 Watch任务可以监视文件和目录的变化，并且在监测到变化后触发一系列任务，在initConfig方法中添加以下的代码来监视Typescript目录下的所有js文件的变化，并执行’all“任务...Runner Explorer中，右键点击watch任务，选择“Bindings->Project Open”，此时，当你打开项目的时候，watch任务将自动执行并且观测文件变化并执行上文中定义的一系列任务...集成 下文是我们组织的一系列任务，将它定义为ALL，执行的任务和上文中grunt的例子是完全一样的 gulp.task("all", function () { gulp.src('wwwroot
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
