前端开发工程师还可以用自己熟悉的语言来编写任务去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上打开不同的浏览器然后进行操作。所有设备上的链接将会随之变化，当你向下滚动页面时，所有设备上页面都会向下滚动（通常还很流畅！）。当你在表单中输入文本时，每个窗口都会有输入。
使用 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
当有多个匹配模式时，该参数可以为一个数组。 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
webpack 的基础配置， npm i webpack -g 在本地如果没有package.json 文件，可以执行初始化操作 npm init 2、创建package.json 文件...着重介绍下： package.json 文件中的scripts，这里边可以自己配置，表示启动node命令： 比如说平时运行的：npm run build、npm run dev,npm run start...文件中的所有依赖包文件 优点：省事儿方便，一条命令一部到位。...() //跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。...包括在提供请求时使用的自签名证书。 --cert，--cacert，--key：路径的证书文件。 --open：在默认浏览器中打开url（对于webpack-dev-server版本> 2.0）。
之前项目中使用的webpack进行前端代码的编译，但一直不太喜欢webpack的那种玩法。...使用webpack编写编译脚本时就是按webpack的规则进行各种配置，必须完全遵守它的条条框框，明明是自己写nodejs代码进行编译，但完全可控感。...之前就听说过gulp+browserify的组合，这次就尝试使用这个东东重写编译脚本。话不多说，直接上最后的成果。...前端编译js时使用了gulp、babel、browserify、babelify，编译css时使用了less，使用gulp-connect作为开发服务器。...watch：这个task启用监听源代码中的文件变更，当发现文件变更时，进行相应的编译处理。同时监听编译目录下的文件变更，当发现变更时，通过浏览器刷新页面。
前言: 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'),
使用缘由 前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率 简介：grunt是一套前端自动化工具...如果找不到你所需要的插件，还可以自己动手创造一个Grunt插件，然后将其发布到npm上。...简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成 为什么要使用gulp.js？...通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等 为什么要使用Webpack.../concepts/ 三者工作方式简介： Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
less、sass等 3.2 小技巧 -- 代码提示时，按下候选列表前的数字，自动把该候选项输入到编辑区 -- 内置Emmet插件，输入div按Tab，自动生成，详见Emmet插件...-g：--global，表示全局安装，全局安装后可在任何目录执行grunt命令 --save-dev：表示安装grunt模块时，模块会被自动加到项目的package.json文件的依赖列表中 1.2 Grunt...匹配glob或glob数组的文件，返回Vinyl-fs类型的stream，可通过管道(pipe)传递给插件 -- gulp.dest(path [,options])：作为管道的输出写入文件，同时输出将继续输出...-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb])：监视文件变化执行某些操作，返回可分发change事件的EventEmitter...（若Gulp列表出现警告，未列出任务，则需要点击警告设置Gulp的NodeJS和Gulp安装路径） 2> SublimeText SublimeText默认没有安装Gulp，参看SublimeText中插件支持的安装方法在
通俗的说，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
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...Globs Globs是引用文件的通配符模式。globs(glob 字符串)或glob的数组用作任务源中的输入。 Watchers 当检测到更改时，Watchers观察源文件以进行更改和调用任务。...运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中： gulp scss 请注意，在本示例中，我们指定了要运行的任务。...在本节中，我们将介绍所有的添加和更改。 return gulp.src(['scss/**/*.scss', '!scss/**/_*']) 在这个例子中，Gulp源提供了一个glob数组。...第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件，第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。
JavaScript在使用时存在两大问题，文件依赖和命名冲突。 2 生活中的模块化开发 ?...在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。...在命令行工具中执行gulp任务 8 Gulp中提供的方法 gulp.src()：获取任务要处理的文件 gulp.dest()：输出文件 gulp.task()：建立gulp任务...，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作 1.5.Node.js中模块加载机制 1 模块查找规则-当模块拥有路径但没有后缀时 require...index.js查看该文件夹中的package.json中的main选 项确定模块入口文件 否则找不到报错
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相同。
为什么要使用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
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)js中require的css名称如果和js所在模块的文件夹名字相同即使部分相同的话
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)js中require的css名称如果和js所在模块的文件夹名字相同即使部分相同的话
它经常用来进行一些前端任务，比如： 生成一个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的插件。...Node的Globbing Globs是匹配文件模式，允许你在gulp.src中增加多个文件。它就像正则表达式一样，但是只用来表示文件路径。 当你使用glob，计算机检查文件名和路径以特定的特征。
其语法为： 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
('gulp-eslint'); //eslint的包 语法检查 const babel = require('gulp-babel'); //编译ES语法的babel包 const browserify...= require('gulp-browserify'); //编译commonJs语法的工具 const rename = require("gulp-rename"); //重命名文件的包...const less = require('gulp-less'); // 识别less文件的gulp的包 const livereload = require('gulp-livereload'...return gulp.src(['src/js/*.js']) // 对流中的文件/数据进行语法检查 .pipe(eslint()) .pipe(eslint.format()...')) }) // 将less编译成css gulp.task('less', function () { return gulp.src('.
LESS编译 压缩 合并 * 2....JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包，因为这个包提供了一些API var gulp = require('gulp'...LESS编译 压缩 --合并没有必要，一般预处理CSS都可以导包 gulp.task('style', function() { // 这里是在执行style任务时自动执行的 gulp.src(...*',['image']); gulp.watch('src/*.html',['html']); }); 附录： gulp常用插件： gulp-less：编译less gulp-concat：合并代码...gulp-uglify：压缩js文件 gulp-rename：重命名文件 gulp-cssnano：css压缩 gulp-htmlmin：压缩html gulp-imagemin：压缩图像 brower-sync
在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#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
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
