首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Gulp开发教程(翻译)

前端开发工程师还可以用自己熟悉语言来编写任务去lint JavaScript和CSS、解析模板以及文件变动编译LESS文件(当然这些只是一小部分例子)。...在上面的例子gulp.src()函数用字符串匹配一个文件或者文件编号(被称为“glob”),然后创建一个对象流来代表这些文件,接着传递给uglify()函数,它接受文件对象之后返回有新压缩源文件文件对象...例如,执行一系列任务和调用一个函数,你就可以返回watcher添加监听change事件: var watcher = gulp.watch('templates/*.tmpl.html', [...: end watcher结束触发(这意味着,文件改变时候,任务或者回调不会执行) error 在出现error触发 ready 文件被找到并正被监听触发 nomatch glob没有匹配到任何文件触发...你可以电脑和iPhone上打开不同浏览器然后进行操作。所有设备上链接将会随之变化,当你向下滚动页面,所有设备上页面都会向下滚动(通常还很流畅!)。当你表单输入文本,每个窗口都会有输入。

84540

9012教你如何使用gulp4开发项目脚手架

使用 gulp-less ——将less编译成css gulp-file-include ——用于文件模块化导入,如用include方式导入公共部分 gulp-connect ——用于启动本地服务器...项目目录设计 1.src目录,即我们开发项目源目录,具体结构如下: 我们定义views是我们视图层,即页面文件目录,js目录为业务逻辑脚本文件,lib存放第三方框架,include目录为公共部分存放目录...,我们可以用gulp-file-include来导入到html,images和css大家都比较清楚,分别存放image和css文件目录。...('src/css/*.less') .pipe(Less()) //编译less .pipe(gulp.dest(dist + '/css')) //当前对应css文件...脚手架选型上,也不一定非要用gulp,webpack,一般经验是传统型静态网站适合用gulp,由于不需要编译es6,所以有更小体积,当然也可以用webpack,本文主要是给大家提供一使用gulp4

1.4K10
您找到你想要的搜索结果了吗?
是的
没有找到

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

当有多个匹配模式,该参数可以为一个数组。 options为可选参数。通常情况下我们不需要用到。 下面我们重点说说Gulp用到glob匹配规则以及一些文件匹配技巧。...当我们没有gulp.src()方法配置base属性,base默认值为通配符开始出现之前那部分路径,例如: gulp.src('app/src/**/*.css') //此时base值为 app...其语法为 gulp.watch(glob[, opts], tasks) glob 为要监视文件匹配模式,规则和用法与gulp.src()方法glob相同。...用gulp.dest()方法写入文件文件名使用文件文件名,如果要想改变文件名,那可以之前用gulp-rename插件来改变文件文件名。...gulp.dest('dist/js')); }); 4.8 less和sass编译 less使用gulp-less,安装:npm install --save-dev gulp-less var gulp

1.8K30

gulp替换webpack

之前项目中使用webpack进行前端代码编译,但一直不太喜欢webpack那种玩法。...使用webpack编写编译脚本就是按webpack规则进行各种配置,必须完全遵守它条条框框,明明是自己写nodejs代码进行编译,但完全可控感。...之前就听说过gulp+browserify组合,这次就尝试使用这个东东重写编译脚本。话不多说,直接上最后成果。...前端编译js使用了gulp、babel、browserify、babelify,编译css使用了less,使用gulp-connect作为开发服务器。...watch:这个task启用监听源代码文件变更,当发现文件变更,进行相应编译处理。同时监听编译目录下文件变更,当发现变更,通过浏览器刷新页面。

2.5K40

Gulp探究折腾之路(I)

前言: gulp是前端开发过程对代码进行构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且开发过程很多重复任务能够使用正确工具自动完成;使用她,我们不仅可以很愉快编写代码,...js/app.js 从匹配结果中排除js/app.js,这种方法在你想要匹配除了特殊文件之外所有文件非常管用 *....结果就是,一启动 gulp,哗哗语法错误提示,根本找不到自己想看文件检测结果。这时修改一个文件,又对所有文件做了一次全量检测,又是哗哗满屏错误提示。而我只关心当前修改文件检测结果。...---- gulp-util幸之助 幸亏有gulp-util之协助:折腾过程,难免不会出现奇奇怪怪问题;然而gulp本身报错提示机制真心让新手我蛋蛋忧伤:比如在折腾过程压缩JS代码就出现...下面有一个gulp-livereload仓库README文件提到例子: var gulp = require('gulp'), less = require('gulp-less'),

1.8K80

javascript自动化构建工具grunt、gulp、webpack介绍

使用缘由 前端工程师需要维护代码变得极为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费时间和精力也越来越多,当然人为错误也随着流程增加而增加了更多出错率 简介:grunt是一套前端自动化工具...如果找不到你所需要插件,还可以自己动手创造一个Grunt插件,然后将其发布到npm上。...简介:gulp是前端开发过程对代码进行构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且开发过程很多重复任务能够使用正确工具自动完成 为什么要使用gulp.js?...通过 loader 转换,任何形式资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等 为什么要使用Webpack.../concepts/ 三者工作方式简介: Grunt和Gulp工作方式是:一个配置文件,指明对某些文件进行类似编译,组合,压缩等任务具体步骤,这个工具之后可以自动替你完成这些任务。

1.1K70

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

less、sass等 3.2 小技巧 -- 代码提示,按下候选列表前数字,自动把该候选项输入到编辑区 -- 内置Emmet插件,输入div按Tab,自动生成,详见Emmet插件...-g:--global,表示全局安装,全局安装后可在任何目录执行grunt命令 --save-dev:表示安装grunt模块,模块会被自动加到项目的package.json文件依赖列表 1.2 Grunt...匹配globglob数组文件,返回Vinyl-fs类型stream,可通过管道(pipe)传递给插件 -- gulp.dest(path [,options]):作为管道输出写入文件,同时输出将继续输出...-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb]):监视文件变化执行某些操作,返回可分发change事件EventEmitter...(若Gulp列表出现警告,未列出任务,则需要点击警告设置GulpNodeJS和Gulp安装路径) 2> SublimeText SublimeText默认没有安装Gulp,参看SublimeText插件支持安装方法

1.9K10

第128天:less简单入门

通俗说,CSS预处理器用一种专门编程语言,进行Web页面样式设计,然后再编译成正常CSS文件,以供项目使用。...4、如何使用预处理Less      less.js > 网页运行阶段解析LESS文件    使用方式:     less compiler > 开发阶段编译LESS文件成为CSS     使用方式:...*/形式作为最终输出 */ 2、变量  Less变量有以下规则: 以@作为变量起始标识,变量名由字母、数字、_和-组成 没有先定义后使用规定; 以最后定义值为最终值; 可用于rule值、rule...Note:注意直接拷贝网页中代码可能因为一些空白符原因导致编译出错。...8 .pipe(gulp.dest("src/css")); 9 }); 10 11 //监视文件变化 12 gulp.task("watch",function(){ 13 gulp.watch

94140

使用Gulp进行JavaScript自动化简易说明书

gulp是基于Nodejs自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件测试、检查、合并、压缩、格式化、浏览器自动刷新...Globs Globs是引用文件通配符模式。globs(glob 字符串)或glob数组用作任务源输入。 Watchers 当检测到更改时,Watchers观察源文件以进行更改和调用任务。...运行以下命令并观察,/ scss文件所有SCSS文件都将编译到相应目录CSSgulp scss 请注意,本示例,我们指定了要运行任务。...本节,我们将介绍所有的添加和更改。 return gulp.src(['scss/**/*.scss', '!scss/**/_*']) 在这个例子Gulp源提供了一个glob数组。...第一个表示包括文件夹在内所有文件以“.scss”结尾文件,第二个表示排除以“_”开头文件。。这样我们可以使用SCSS内置函数@import来连接_page.scss文件

3.2K10

Gulp使用指南

gulp是基于Nodejs自动任务运行器, 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件测试、检查、合并、压缩、格式化、浏览器自动刷新...把目录切换到你项目文件,然后命令行执行: npm install gulp   如果想在安装时候把gulp写进项目package.json文件依赖,则可以加上--save-dev: npm...三.Gulp使用 1 建立gulpfile.js文件   gulp也需要一个文件作为它文件gulp这个文件叫做gulpfile.js。...新建一个文件名为gulpfile.js文件,然后放到你项目目录。之后要做事情就是gulpfile.js文件定义我们任务了。...其语法为 gulp.watch(glob[, opts], tasks); glob 为要监视文件匹配模式,规则和用法与gulp.src()方法glob相同。

1.2K60

使用Gulp

为什么要使用Gulp 在前端开发通常需要做,预处理语言编译、js文件压缩、css文件压缩、图片压缩等一系列工作,而使用Gulp可以自动化完成这些工作,从而提高网站开发效率,博客使用Less...中介绍了将Less文件编译成CSS文件方法,仔细观察可以看到如果按照博客中介绍方法,在编译多个Less文件或者编译不同文件夹下Less文件需要执行多次Less文件编译命令,而使用Gulp可以一次性完成这些操作...gulp dist 6.此时只要修改src文件index.html文件,修改完成后只要一保存,HTML代码就能同时同步到dist文件夹下index.html 使用Gulp自动将Less编译成...2.创建Less文件 Git Bash执行下面的命令创建一个less文件夹,并且less文件夹下创建一个style.less文件没有安装Git Bash情况下可以手动创建 # 创建less.../less/*.less', ['less']); }); 5.命令行执行下面的命令,启动将Less文件编译成CSS文件任务 gulp watchLess 5.修改less文件夹下style.less

55730

gulp+webpack工具整合简介

gulp 简介 gulp是前端开发过程对代码进行构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且开发过程很多重复任务能够使用正确工具自动完成;使用它,我们不仅可以很愉快编写代码...PS:未能出现版本号,请尝试注销电脑重试; npm -v查看npm版本号,npm是安装nodejs一同安装nodejs包管理器,那它有什么用呢?...7、本地安装gulp插件 7.1、安装:定位目录命令后提示符执行cnpm install –save-dev; 7.2、本示例以gulp-less为例(编译less文件),命令提示符执行cnpm install...]) 处理完后文件生成路径 9、运行gulp 9.1、说明:命令提示符执行gulp 任务名称; 9.2、编译less:命令提示符执行gulp testLess; 9.3、当执行gulp default...但是实践过程,(1)通过import引入js模块引入css是优先于require引入js模块引入css;(2)jsrequirecss名称如果和js所在模块文件夹名字相同即使部分相同的话

2.4K50

gulp+webpack工具整合简介

gulp 简介 gulp是前端开发过程对代码进行构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且开发过程很多重复任务能够使用正确工具自动完成;使用它,我们不仅可以很愉快编写代码...PS:未能出现版本号,请尝试注销电脑重试; npm -v查看npm版本号,npm是安装nodejs一同安装nodejs包管理器,那它有什么用呢?...7、本地安装gulp插件 7.1、安装:定位目录命令后提示符执行cnpm install –save-dev; 7.2、本示例以gulp-less为例(编译less文件),命令提示符执行cnpm install...]) 处理完后文件生成路径 9、运行gulp 9.1、说明:命令提示符执行gulp 任务名称; 9.2、编译less:命令提示符执行gulp testLess; 9.3、当执行gulp default或...但是实践过程,(1)通过import引入js模块引入css是优先于require引入js模块引入css;(2)jsrequirecss名称如果和js所在模块文件夹名字相同即使部分相同的话

1.5K80

给初学者Gulp教程(译)

它经常用来进行一些前端任务,比如: 生成一个Web服务器 当一个文件保存,浏览器自动刷新 编译像Sass或者LESS一样预处理器 优化资源文件,像CSS,JavaScript和图片等 这些并不是Gulp...编译像Sass或者LESS一样预处理器 优化资源文件,像CSS,JavaScript和图片等 你也将学习如何使用容易理解和执行命令行,将不同任务捆绑在一起。...一个gulp任务基本语法是: gulp.task('task-name',function(){ //stuff here }) task-name指的是任务名称,当你Gulp运行这个任务...Gulp预处理 Gulp,我们可以将Sass编译成CSS,使用一个叫做gulp-sass插件。...NodeGlobbing Globs是匹配文件模式,允许你gulp.src增加多个文件。它就像正则表达式一样,但是只用来表示文件路径。 当你使用glob,计算机检查文件名和路径以特定特征。

4.3K20

gulp 详解与使用

其语法为: gulp.src(globs [, options]) gulp 用到 glob 匹配规则以及一些文件匹配技巧。 gulp 内部使用了 node-glob 模块来实现其文件匹配功能。...,则表示不匹配方括号中出现其他字符任意一个,类似 js 正则表达式用法。 !(pattern|pattern|pattern) 匹配任何与括号给定任一模式都不匹配 ?...当我们没有 gulp.src() 方法配置参数 base 属性,base 默认值为通配符开始出现之前那部分路径,例如: gulp.src("app/src/**/*.css") //此时base...其语法为: gulp.watch(glob[, opts], tasks); glob 为要监视文件匹配模式,规则和用法与 gulp.src() 方法 glob 相同。...为改变 console.log(event.path); //变化文件路径 }); gulp 插件 gulp 本身虽然不能完成很多任务,但它有大量插件可用,我们可以 插件页面 或者 npm

1.1K10

查找预编译遇到意外文件结尾。是否忘记了向源添加“#include StdAfx.h”?

查找预编译遇到意外文件结尾。是否忘记了向源添加“#include "StdAfx.h"”?...右键选择该文件.cpp格式->属性->预编译头,→ 不使用预编译头 错误描述:fatal error C1010: 查找预编译遇到意外文件结尾。...是否忘记了向源添加“#include "stdafx.h"”? 错误分析: 此错误发生原因是编译寻找预编译指示头文件(默认#include "stdafx.h")文件未预期结束。...解决方式: 一. 1) 解决方案资源管理器,右击相应.cpp文件,点击“属性” 2) 左侧配置属性,点开“C/C++”,单击“预编译头” 3) 更改右侧第一行“创建/使用预编译头”,把选项从...(不推荐) 1)解决方案右击工程,点击属性 2)配置属性 -> c/c++ -> 预编译 将 “使用预编译头(/YU)” 改为 “不适用预编译头” 这种做法会使每次编译过程非常缓慢 备注: 1

8K30
领券