GULP.SRC() gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组，然后返回一个可以传递给插件的数据流。...这个特性十分有用（对我来说，这可能是Gulp中最有用的一个功能）。你可以保存LESS文件，接着Gulp会自动把它转换为CSS文件并更新浏览器。...}); 现在，当改变一个模板文件时，build任务会被执行并生成HTML文件，也可以给watch函数一个回调函数，而不是一个任务数组。...() { gulp.src('less/*.less') .pipe(watch()) .pipe(less()) .pipe(gulp.dest('css')...一旦监测到变化，就会生成css并保存，然后重新加载网页. BROWSERSYNC BroserSync在浏览器中展示变化的功能与LiveReload非常相似，但是它有更多的功能。
有没有接触过 Less、Sass、Stylus 这一类 CSS 预编译框架？如何在 Webpack 接入这些工具？...devServer: { hot:true }, watch: true // 持续监听本地文件变化并即时构建 } … # Tree-Shaking 删除未被使用的代码...语法文件的解析为例： less-loader：实现 less => css 的转换 css-loader：将 CSS 包装成类似 module.exports = “${css}” 的内容，包装后的内容符合...要求的输出是什么？ Loader 的链式调用是什么意思？如何串联多个 Loader ？ Loader 中如何处理异步场景？...提供的回调机制，以参数方式传递上下文信息义 交互：在上下文参数对象中附带了很多存在 side effect 的交互接口，插件可以通过这些接口改变 # 学习方法 入门应用 理解打包流程
当然，npm link也支持多个参数: npm link gulp gulp-concat gulp-rename gulp-uglify gulp-minify-css gulp-jshint gulp-cached...以及@V2EX gulp如何管理多项目;热心码友也提出了一些可行的建议，比如：配置多个task，或者采用fbi，或者采用nodejs 中的 NODE_PATH@nodejs 中的 NODE_PATH等等...() { gulp.src('less/*.less') .pipe(watch()) .pipe(less()) .pipe(gulp.dest('css')...一旦监测到变化，就会生成css并保存，然后重新加载网页. BrowserSync 安装 BrowserSync 您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。...，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。
编译器了，如下： $ lessc styles.less 这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件： $ lessc styles.less > styles.css...若要输出压缩过的 CSS，只需添加 -x 选项。...如果希望获得更好的压缩效果，还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。 执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。...代码中使用 可以像下面这样在代码中调用 Less 编译器（Node 平台）。...(err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); }); 配置 可以给编译器传递多个参数
当有多个匹配模式时，该参数可以为一个数组。 options为可选参数。通常情况下我们不需要用到。 下面我们重点说说Gulp用到的glob的匹配规则以及一些文件匹配技巧。...展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。...()还有另外一种使用方式： gulp.watch(glob[, opts, cb]) glob和opts参数与第一种用法相同 cb参数为一个函数。...// 合并匹配到的js文件并命名为 "all.js" .pipe(gulp.dest('dist/js')); }); 4.8 less和sass的编译 less使用gulp-less,安装：npm...()方法 gulp.watch('less/*.less', ['less']); }); 如对gulp还有什么不明白之处，或者本文有什么遗漏或错误，欢迎一起交流和探讨~
在 Webpack 中，一切皆模块，我们常见的 Javascript、CSS、Less、Typescript、Jsx、图片等文件都是模块，不同模块的加载是通过模块加载器来统一管理的，当我们需要使用不同的...可选参数，代码的 sourcemap 结构 // data: 可选参数，其它需要在 Loader 链中传递的信息，比如 posthtml/posthtml-loader 就会通过这个参数传递参数的 AST...loader 添加到您的配置中，并设置 options。...了解更多请移步链接 11. less-loader 解析 less，转换为 css。 代码示例见上文 postcss-loader 了解更多请移步链接。...html 文件： 单页应用可以生成一个 html 入口，多页应用可以配置多个 html-webpack-plugin 实例来生成多个页面入口； 为 html 引入外部资源如 script、link，将
function () { console.log('aaaaaaaa'); //grunt.log.writeln('aaaaaaaa'); //函数中可以传递参数...--save-dev grunt.loadNpmTasks('grunt-contrib-watch'); watch:{ html:{.../a.scss', dest:'dist/scss/a.css' } } 编译less npm install grunt-contrib-less...--save-dev less:{ myless:{ src:'css/b.less', dest...:'dist/less/b.css' } } npm install grunt-contrib-concat --save-dev //安装合并插件 npm install
可选参数，其它需要在 Loader 链中传递的信息，比如 posthtml/posthtml-loader 就会通过这个参数传递参数的 AST 对象 其中 source 是最重要的参数，大多数 Loader...函数的 data 相同，用于传递需要在 Loader 传播的信息 这些参数不复杂，但与 requestString 紧密相关，我们看个例子加深了解： module.exports = { module...", "less-loader" ], }, ], }, }; css-loader.pitch 中拿到的参数依次为： // css-loader 之后的 loader...webpack/schema-utils：参数校验工具 这些工具的具体接口在相应的 readme 上已经有明确的说明，不赘述，这里总结一些编写 Loader 时经常用到的样例：如何获取并校验用户配置；...实例，并运行 Loader 获取 Loader 执行结果，比对、分析判断是否符合预期 判断执行过程中是否出错 如何运行 Loader 有两种办法，一是在 node 环境下运行调用 Webpack 接口
Vue: vue 数据双向绑定原理； vue computed 原理、watch 和 methods 的区别； vue 编译器结构图、生命周期、vue 组件通信； mvc 模式、mvp 模式、mvvm...}, //使用get 和 set 方去修改获取到的属性值 fullNameSed：{ get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值...javaScript、scss，less 编译成 css....文件优化：压缩 javaScript、css、html 代码，压缩合并图片。 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。...webpack 打包过程： 1.利用 babel 完成代码转换,并生成单个文件的依赖 2.从入口开始递归分析，并生成依赖图谱 3.将各个引用模块打包为一个立即执行函数 4.将最终的 bundle 文件写入
I/O 操作也是个弊病，它的每一次任务都需要从磁盘中读取文件，处理完后再写入到磁盘，例如：我想对多个 less 进行预编译、压缩操作，那么 Grunt 的操作就是： 读取 less 文件 -> 编译成...（Stream），也就是说一次 I/O 可以处理多个任务，还是 less 的例子，Gulp 的流程就是： 读取 less 文件 -> 编译成 css -> 压缩处理 -> 存储到磁盘 Gulp 作为任务类型的工具没有明显的缺点...在了解这些常见的构建工具后，你需要根据自己的需求去判断应该如何选择和搭配它们才能更好地完成自己的需求。...页面，既可以生成单个页面又可以生成多个页面，并且在生成前可以给它一些的配置参数，它会按照你想要的生成方式去生成页面。...这个原因是devServer会将webpack构建出的文件保存到内存里，不需要打包生成就能预览 6.2、参数设置 在webpack.config.js中可以根据需要配置dev-server满足你更多的需求
在Webpack中，一切皆模块，我们常见的Javascript、CSS、Less、Typescript、Jsx、图片等文件都是模块，不同模块的加载是通过模块加载器来统一管理的，当我们需要使用不同的 Loader...，代码的 sourcemap 结构// data: 可选参数，其它需要在 Loader 链中传递的信息，比如 posthtml/posthtml-loader 就会通过这个参数传递参数的 AST 对象const..." ]}更多配置请看 官网3. markdown-loadermarkdown编译器和解析器**用法：**只需将 loader 添加到您的配置中，并设置 options。...html文件单页应用可以生成一个html入口，多页应用可以配置多个html-webpack-plugin实例来生成多个页面入口为html引入外部资源如script、link，将entry配置的相关入口chunk...以及mini-css-extract-plugin抽取的css文件插入到基于该插件设置的template文件生成的html文件里面，具体的方式是link插入到head中，script插入到head或body
等到使用了一段时间之后，自然而然的就知道该如何配置了。...这里主要记录一下项目中使用的配置，如果想要系统的学习如何使用这两个工具，可以参考下面的文章： Gulp入门教程 一小时包教会 —— webpack 入门指南 Gulp 和 Webpack 集成 Gulp.../**/*.css", browserSync.reload); }); // 添加到默认任务 gulp.task('default', ['browserSync', 'watch', 'webpack...object"> {{ value }} 如果传入第二个参数，就是针对对象的属性值以及属性名进行迭代，注意这里二个参数表示的是属性名，也就是 key <...，子组件通过 events 给父组件发送消息 父组件向子组件传递数据 通过使用 props，父组件可以把数据传递给子组件，这种传递是单向的，当父组件的属性发生变化时，会传递给子组件，但是不会反过来。
lessc -v 查看版本即可 vscode使用Less 本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件...所以，我们需要把我们的 Less 文件，编译生成为 CSS 文件，这样我们的 HTML 页面才能使用。...(overridable per-file, see below)生成对应的css文件 } 只要保存一下 less 文件，会自动生成 CSS 文件。...Mixins) 混合带参数，参数需要按顺序传递 .border(@width, @style, @color) { border: @width @style @color; } div {....border(1px, solid, #ccc); } div { border: 1px solid #ccc; } 混合带参数并有默认值 需注意的是，就算有默认值，也要按顺序传递 .border
hash:16（默认20），区别在于： hash 在整个项目唯一，每次修改任何文件编译都会生成新的 hash，因此无法实现前端静态资源在浏览器上的长缓存； chunkhash 根据不同的入口文件 entry...mini-css-extract-plugin 或 extract-text-webpack-plugin 插件抽离出来并使用 contenthash。...file.js', // 对象 entry: { main: 'path/to/my/entry/file.js' }, // 数组，实际只有一个入口，会自动生成另外一个入口模块并加载数组指定的模块...node-webkit：编译为 Webkit 可用（使用 jsonp 加载分块） webworker：编译成一个 WebWorker 3.5 devtool 配置 sourcemap devtool 参数用来控制如何显示...，如 less 模块文件，除了将 less 语法转换成 CSS 语法，还需要添加 css-loader 等处理为 js 能直接使用的模块，webpack 的 loader 解析顺序是从右到左（从后到前）
: 忽略的文件 allowJs: 是否允许js的语法 安装声明文件.这样在编译的时候就会给出警告错误, 告诉我们传递的参数类型有错误 npm install @types/lodash npm install...处理CSS 每一个模块都有自己的css文件, 在使用的时候将css样式引入 如何在webpack中引入css style-loader 在页面中创建style标签, 标签里面的内容就是css内容 style-loader...css文件 , 但是引入多个文件的时候, 会生成多个link标签, 会造成越多的网路请求 //3. style-loader/useable import base from 'base.css' import..., 是不行执行的 // 在style-loader 将样式插入到DOM中的时候 执行的, 运行的环境是在浏览器环境下, 可以拿到浏览器参数, window,UA // 可以根据当前浏览器来对当前的...'[[path]][name]_[local]--[hash:base64:5]' 控制生成的class类名 path代表引用css路径 name表示文件名称 local本地样式名称 配置less
：压缩后的 css 代码:nested在执行监测 (编译) 命令时，可以指定输出格式为 nested：sass --watch styles.scss:styles.css --style nestednested...要将 CSS 输出设置为展开格式，可以使用如下命令:sass --watch styles.scss:styles.css --style expanded该格式下，输出的 CSS 代码:div {...要将 CSS 输出设置为紧凑格式，可以使用如下命令:sass --watch styles.scss:styles.css --style compact该格式下，输出的 CSS 代码:div { padding...要将 CSS 输出设置为压缩格式，可以使用如下命令:sass --watch styles.scss:styles.css --style compressed该格式下，输出的 CSS 代码:div{padding...中的 class；2、参数混入 —— 可以传递参数的 class，就像函数一样；3、嵌套规则 ——Class 中嵌套 class，从而减少重复的代码；4、运算 ——CSS 中用上数学；5、颜色功能 —
它经常用来进行一些前端任务，比如： 生成一个Web服务器 当一个文件保存时，浏览器自动刷新 编译像Sass或者LESS一样的预处理器 优化资源文件，像CSS,JavaScript和图片等 这些并不是Gulp...编译像Sass或者LESS一样的预处理器 优化资源文件，像CSS,JavaScript和图片等 你也将学习如何使用容易理解和执行的命令行,将不同的任务捆绑在一起。...有时我们需要能够编译多个.scss文件成CSS文件。我们可以在Node globs的帮助下完成（globs参数是文件匹配模式，类似正则表达式,用来匹配文件路径包括文件名）。...我们能做到，通过给watch任务添加第二参数。...在我们做那个之前，让我们来看看如何自动清理生成的文件。 自动清理生成的文件 由于我们自动生成文件，我们希望确定那些不再使用的文件不保留在我们不知道的地方。
本文将会介绍如何使用gulp4来搭建项目脚手架，如果您还在使用gulp3或更老的版本，您也以通过本文的一些思想将之前的项目进行完善，更新。...使用 gulp-less ——将less编译成css gulp-file-include ——用于文件模块化导入，如用include的方式导入公共部分 gulp-connect ——用于启动本地服务器...我的设计是如果项目使用node等服务层框架，我们可以用gulp一并打包放入dist下，这样dist就是一个完整的包括前后端服务的项目目录了，当然大家也可以直接将src打包后的文件和文件夹直接放到dist...3. gulpfile文件配置 由于我们要区分开发环境和生产环境，所以这里我们使用两个不同的配置文件，根据NODE_ENV来区分用哪个文件。...**', gulp.series('js')); // 监听js变化 gulp.watch('src/css/*', gulp.series('css')); // 监听css变化 gulp.watch
7.4. mixin的重载可定义多个同名mixin，调用时只要参数数量匹配则会执行相应的mixin。 8....父选择器引用(ParentSelector) 采用&引用完整的父选择器 可通过追加和预追加的方式加工&，从而生成新的选择器 通过&::after等方式添加伪元素、伪类样式规则集合 同一个选择器可使用多个...@import (inline) "文件路径"; 用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。...七、通过Lessc将Less引入开发环境 到这里我想大家已经对Less有一定程度的了解，并希望在将其加入你的开发工具包中。...但正如标题所说，此刻无论是对less的使用，还是将其融入我们的开发工作流，我们均是入了个门而已。那应该如何进阶呢？
设计标准 以上色系变量表是我们本次最终需要的全部变量 其中每种色系分为两种，h开头的和a开头的，a开头的通过调整透明度来生成，h 开头的一组由 base 色通过ant-design 的动态计算生成...但是问题来了 1、如何在index.less 中来判断使用light-colors 还是 dark-colors 呢？...@import 只能定义在文件顶部，也没有任何可以做条件引入的方法 2、如何根据品牌色动态计算色系变量值呢？...编译器，太大了，严重影响性能； 需要webpack 配置，无法多个进程间共享变量，不适用于微前端项目。...方案三： 1、在webpack构建时，通过 webpack-theme-color-replacer这个插件从所有输出的css文件中提取主题颜色样式，并创建一个仅包含颜色样式的'theme-colors.css
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
