$ npm install 构建项目 在当前目录下创建source文件夹同时为其创建子目录，如下结构， 其中views目录下layouts用于视图模版，application用于视图文件 + node_modules...', 'watch'] styles任务，会将scss目录下的样式文件编译成css，然后autoprefixer方法会自动添加不同浏览器的前缀，concat合并成一个文件style.css后会使用minifycss...如果能看懂这个任务其他也都ok了。 gulp.task 'styles', -> return sass('..../dist/css/') extend任务会将模版文件解析并生成相应的html js压缩js image对图片资源进行无损压缩 clean清空编译目录 sitemap生成站点地图，便于SEO watch...监听文件，当发生改动时调用相应的任务 build用于构建编译文件 default默认任务，使用gulp命令执行的任务 browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼 rebuild
比如，对sass文件进行预编译的task可以对其配置路径下的所有sass文件进行预编译处理： gulp.task('sass',function(){ gulp.src('src...在详细一点就是： 创建主页html文件 创建与之对应的app.js入口文件和app.scss入口文件。...结论是正确的，Gulp可以对css文件以及js文件进行合并压缩处理，而Webpack可以实现对css文件，js文件，html文件等进行合并压缩和图片的压缩，还可以对js文件进行编译（如es6–>es5，...console.log('所有任务队列执行完毕'); }); ``` 这样，一个简单的sass预处理的task就配置完成了，然后我们还将该task加到gulp.watch()上实现了自动编译（即修改...（上一小节已介绍，结合gulp.watch()实时监控文件变化，并编译）。
//registry.npm.taobao.org 4、全局安装gulp：(c)npm install gulp -g 5、新建package.json到项目根目录【非必选】（josn文件需删除注释，此用来记录项目信息和配置初始插件...安装需要的gulp组件（绿色部分为需要安装的组件）另sass编译需提前安装ruby。...（如第五步配置完成，此步忽略） npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint...--save-dev 4 */ 5 // 加载插件 6 var gulp = require('gulp'),//加载gulp 7 sass = require('gulp-sass...gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件 24 .pipe(sass()) 25 .pipe(autoprefixer
的js文件，如果两个都含有同一任务，不特殊说明的话，命令行只执行文件名为gulpfile.js的任务），在命令行输入 npm install gulp --save-dev（之前没有安装过gulp的话...文件去install相关插件（多人开发尤其要注意保存安装信息），创建gulp成功后，目录结构变为 ?...gulp-less 一个编译less文件的插件,在less编译中，可选择添加插件，如【autoprefix】，自动添加CSS前缀的插件，代码实现为： var less=require('gulp-less...如果是sass开发，就下载gulp-sass的相关插件。 gulp-minify-css 一个压缩css的插件，与uglify类似，只不过一个压缩JS，一个压缩CSS。...任务的插件，在实际场景中，不允许我们同时跑很多任务，因为任务之间往往是相互依赖的，此时run-sequence就是一个很好的选择，他可以让多个任务按照写入顺序执行，同时可以控制哪些任务并行跑，哪些按照顺序跑
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快...其语法为 gulp.watch(glob[, opts], tasks) glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。...()还有另外一种使用方式： gulp.watch(glob[, opts, cb]) glob和opts参数与第一种用法相同 cb参数为一个函数。...')(); 然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp...gulp.dest('dist/js')); }); 4.8 less和sass的编译 less使用gulp-less,安装：npm install --save-dev gulp-less var gulp
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。 同样的，也是包括基本用法和各插件的使用。...package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了） 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样：...下面统一介绍几个常见的 插件，更详细用法可以到对应官方站点查看API sass的编译（gulp-ruby-sass） 自动添加css前缀（gulp-autoprefixer） 压缩css（gulp-minify-css...比如安装压缩css的依赖包： npm install gulp-minify-css --save-dev 这里直接把所以依赖全支持上，因为都要用到。...; }); 解释一下，其实就是 将sass文件编译成css，以流的形式pipe结果，再加css前缀，修改后缀为.min.css，并作资源压缩，最后成功后返回done的消息 命令行键入
此时您可以运行第一个任务。运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中： gulp scss 请注意，在本示例中，我们指定了要运行的任务。...例如，您可能希望使用 gulp-minify-css 来最小化您的任务的最终产品，并使用gulp-autoprefixer自动添加供应商的前缀（vendor prefixes）。...你可以从 toptal-gulp-tutorial/step2下载它，它包括之前创建的SCSS任务的增强版本，以及一个观察检测源文件并调用任务的watcher。...为了启动它，请使用以下命令： gulp 这个命令启动名为 “default”并开启watcher.的任务，此时，您可以编辑任何SCSS文件，并重新编译CSS文件。...要深入了解这个JavaScript自动化实现，我建议添加 gulp-notify ，当任务运行时通知你。此外，您可以创建一个单独的任务来最小化生成的CSS代码，并使“scss”任务作为依赖关系运行。
-- 语法校验、转到定义、重构 、大纲、任务TODO 、版本历史、内置webserver、预编译less、sass等 3.2 小技巧 -- 代码提示时，按下候选列表前的数字，自动把该候选项输入到编辑区...三、构建工具 在前端开发过程中，经常需合并文件、压缩代码、单元测试、检查语法错误等，需要用手工或不同的工具来完成不同的任务，重复劳动且耗时繁琐，而自动化构建工具可以帮我们自动管理和运行各种任务。...多次调用dest将多次输出到多个目录，目录不存在则创建 -- gulp.task(name [,deps], fn)：指定任务名及任务函数来定义任务。default为Gulp默认执行的任务。...（若Gulp列表出现警告，未列出任务，则需要点击警告设置Gulp的NodeJS和Gulp安装路径） 2> SublimeText SublimeText默认没有安装Gulp，参看SublimeText中插件支持的安装方法在...这就要求一个理想的自动化构建工具应满足 简单，易用，易扩展，易维护，高性能，多平台运行，可靠，可测试等要求。其架构设计应满足的功能需求与非功能性需求如下图所示。 ?
本文作者：IMWeb 林鑫 原文出处：IMWeb社区 未经同意，禁止转载 本文主要展示的是gulp常用插件的使用方法和用途，通过对插件的熟练运用达到精通gulp。不定期更新。...'); gulp.src('index.html') .pipe(useref()) // 替换HTML中引用的css和js .pipe...和js替换成有版本号的名字 .pipe(gulp.dest('..../dist')) gulp-sass 描述：编译sass。 var sass = require('gulp-sass'); gulp.src('..../sass/**/*.scss', ['sass']); // 实时监听sass文件变动,执行sass任务 gulp-babel 描述：将ES6代码编译成ES5。
使用gulp能完成以下任务： 压缩html、css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程： 开发->分析->测试->编译->发布部署.../build/')) }) 上面gulp配置完成的内容是： 1.将目录下所有的以.js结尾的文件 2.执行jshint代码检查 3.然后concat合并为一个文件， 4.再使用uglify...需要从bower_components文件夹中就项目实际使用的js和css文件复制发布文件夹中。...在gulpfile.js中有一个task名为vendor，主要任务就是将项目中实际使用的js和css复制到发布文件夹中。我们项目发布文件夹名字为dist。...("dist")); }); 开发的源代码 vs 发布的代码文件文件大小对比 4.参考内容 http://www.gulpjs.com.cn/ 前端构建工具gulp使用 前端构建大法 Gulp 系列 (
ASP.NET Core 中的捆绑和缩小静态资产 2020/09/02 作者：Scott Addie 和 David Pine 本文介绍应用捆绑和缩小的好处，包括如何在 ASP.NET Core Web...什么是捆绑和缩小 捆绑和缩小是可以在 Web 应用中应用的两个不同的性能优化。 捆绑和缩小一起使用，可减少服务器的请求数并减小请求的静态资产的大小，从而提高性能。...因此，在请求相同资产的同一站点上请求相同的一个或多个页面时，捆绑和缩小不会提高性能。...缩小 缩小在不更改功能的情况下从代码中删除不必要的字符。 因此，请求的资产（如 CSS、图像和 JavaScript 文件）的大小大幅减小。...第三方工具（如 Grunt 任务运行程序）以更复杂的方式完成相同的任务。 开发工作流需要捆绑和缩小之外的其他处理（如 linting 和图像优化）时，第三方工具非常适用。
结构说明 assets 项目资源目录，dev 开发目录，dist 编译输出目录，gulpfile.js 自动化工具 API gulp 的使用 安装 node 环境 (自行 goole 即可) 全局安装...gulp $ npm install gulp -g 进入到需要 gulp 管理的项目路径，如 /gulp 再安装一遍 $ npm install gulp --save-dev 安装 gulp 插件...$ npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify...gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del sass的编译 (`gulp-ruby-sass`) 自动添加...运行 task 任务 $ gulp 监听文档实现实时编译 $ gulp watch gulp 的 API 请查看 gulpfile.js 文件 scss 文件规范以及说明 各个小模块以下划线开头全小写命名
直接创建settings文件的可以在环境变量中用户变量里创建 NVM_HOME 和 NVM_SYMLINK，并添加路径 NVM_HOME： C:\dev\nvm NVM_SYMLINK ： C:\dev...gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...gulp是引入开发过程中的一些小工具，生产模式不需要gulp 本示例以gulp-less为例（将less编译成css的gulp插件）展示gulp的常规用法，只要我们学会使用一个gulp插件后，其他插件就差看看其帮助文档了...--save-dev 浏览器同步刷新：npm install browser-sync --save-dev 编译 Less：gulp-less 编译 Jade: gulp-jade 创建本地服务器：...文件 gulp-minify-html 最小化图像：gulp-imagemin 5、运行gulp 说明：命令提示符执行gulp 任务名称； 编译less：命令提示符执行gulp testLess； 当执行
实践 创建项目目录 首先初始化npm依赖项与基本信息，使用命令npm init一直回车，生成package.json文件，也可以直接去上边github仓库目录下载。...你的项目目录关系到你的gulp脚本里的任务路径，我脚本里写的是匹配所有的目录和文件。我简单举个例子：这里js/common里的js文件也会被处理。如果只想处理特定目录的文件，请修改任务里的路径。...} } 编写gulp脚本 新建 gulpfile.js文件,并引入所需模块，这里我把路径统一写在PATHS中。...，在有时候我们需要同步执行任务，比如：先编译less,在对编译好的css进行压缩，这个时候异步就有问题了。...所有任务 这里创建一个名为default 的任务，执行上面的deploy任务 gulp.task('default', ['deploy'], function (e) { console.log
对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。...Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。...前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件（当然这些只是一小部分例子）。...为了确保一个任务在另一个任务执行前已经结束，可以将函数和任务数组结合起来指定其依赖关系。...在执行那些代码之后，插件对象就已经包含了插件，并使用“驼峰式”的方式进行命名（例如，gulp-ruby-sass将被加载成plugins.rubySass），这样就可以很方便地使用了。
下面代码是使用 gulp 初次来编译 sass，由于一直都有点习惯了 Grunt 那编译速度单位为秒级别的速度，刚输入命令还没反应过来，就已经以毫秒级的速度编译完了。...()) .pipe(gulp.dest('dev/css')); }); 比较一下 Grunt 与 gulp 编译同一套 sass 代码下所花费的时间： 并不是说 Grunt...其中专门创建一个 gulp 目录用来存放 gulp 代码，为了能够将任务更加细化，职责单一，方便日后的维护更新。...:html', cb ); }); 最终生成的代码依然在 dist 目录下，也就是说在开发阶段与上线打包阶段构建生成的代码都在同一个目录下，只不过在开发阶段代码是未进行合并压缩...未解决的问题 开发阶段：对 RequireJs 的路径配置（config.js 与 gulp 中的配置）感到困惑迷糊，多创建一个目录就路径不匹配打包不成功。
（每次改动文件都会自动拷贝和压缩） ** ② 监听文件： 使用watch 随后在cmd中输入 gulp watchall 待修改代码后则一直会监听 ④ 合并js文件 使用gulp-concat...(“gulp-concat”); 随后如果要合并index.js和tools.js两个文件 则继续在gulpfile.js的文件中输入如下所示 （ 接着上面的启动监听） 若要压缩则如上所示...命令行输入** gulp watchall ⑥ 压缩css 使用Gulp-minify-css 插件 在cmd命令行中输入 npm install gulp-minify-css –save-dev...//安装Gulp-minify-css 插件 待安装成功后在gulpfile.js的文件中输入const minifycss = require(“gulp-minify-css”) （继续在重命名...gulpfile.js的文件中所用插件的 ⑦ 编译sass 或 less 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新...而gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作。这看起来有点“像jQuery”的方法，把动作串起来创建构建任务。早在Unix的初期，流就已经存在了。...特点 易于使用 通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。 构建快速 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。...易于学习 通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。 插件高质 gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。...(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的?
编译像Sass或者LESS一样的预处理器 优化资源文件，像CSS,JavaScript和图片等 你也将学习如何使用容易理解和执行的命令行,将不同的任务捆绑在一起。...Gulp预处理 在Gulp中，我们可以将Sass编译成CSS，使用一个叫做gulp-sass的插件。...所以让我们在app/scss文件夹中创建一个styles.scss文件。这个文件将会被加入到sass任务中的gulp.src中。...大部分Gulp工作流倾向于只要求4个不同的匹配模式。 1.*.scss:*特征是一个通配符，用来匹配当前路径中的一些特征文件。...结束 我们已经经过了Gulp的基础以及创建了一个工作流，可以将Sass编译成CSS，同时监测HTML和JS文件发生改变。我们可以在命令行通过gulp命令运行这个任务。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
