编译像Sass或者LESS一样的预处理器 优化资源文件，像CSS,JavaScript和图片等 你也将学习如何使用容易理解和执行的命令行,将不同的任务捆绑在一起。...gulp.src告诉Gulp任务，所要使用的文件。gulp.dest`告知当任务完成后，Gulp输出文件的地址。 让我们来尝试构造一个真实的任务，将Sass文件编译成CSS文件。...如果特征存在，文件就会被匹配。 大部分Gulp工作流倾向于只要求4个不同的匹配模式。 1.*.scss:*特征是一个通配符，用来匹配当前路径中的一些特征文件。...+(scss|sass):加号+和括号()``允许Gulp匹配大量的特征，不同的特征使用|分隔开。倘若这样，Gulp将匹配根目录下所有以.scss或者.sass`结尾的文件。...现在让我们把所有任务都组合到一起吧。 组合Gulp任务 让我们总结一下我们做的吧。到目前为止，我们创建了两个不同Gulp任务集。
前言 我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1… 本次目标 es6 转换成 es5 图片压缩 scss编译 模板html...编译 安装gulp yarn add gulp --dev 复制代码 安装完毕之后我们就开始进入正题 样式编译 首先我们使用gulp进行scss的样式编译 gulpfile.js const { src...文件 当然我们还需要进行scss的转换，安装 yarn add sass gulp-sass --save-dev 复制代码 然后我们再进行一下改造 gulpfile.js const { src, dest....pipe(plugins.imagemin()) .pipe(dest('dist')) } module.exports = { image, font } 复制代码 创建组合任务...这里我们要把样式、脚本、模板的编译等等的进行组合，首先我们先安装一个依赖 yarn add gulp-load-plugins --dev 复制代码 主要通过gulp的parallel const {
gulp.src('scss/*.scss') //该任务针对的文件,此处为scss文件夹下，所有.scss后缀的文件 .pipe(scss()) //...你可以从toptal-gulp-tutorial/step1下载入门工具包，帮助你完成第一个任务。它包含一个将SCSS文件编译为 cs的简单任务。...此时您可以运行第一个任务。运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中： gulp scss 请注意，在本示例中，我们指定了要运行的任务。...gulp.task('scss', function() { 我们定义名为“scss”的任务。 return gulp.src('scss/*.scss') 设置任务的源文件。这些被定义为全局。...为了启动它，请使用以下命令： gulp 这个命令启动名为 “default”并开启watcher.的任务，此时，您可以编辑任何SCSS文件，并重新编译CSS文件。
先进入的项目目录, 执行下面命令，一路回车即可。会生成名为package.json的文件。...', 'watch'] styles任务，会将scss目录下的样式文件编译成css，然后autoprefixer方法会自动添加不同浏览器的前缀，concat合并成一个文件style.css后会使用minifycss.../dist/css/') extend任务会将模版文件解析并生成相应的html js压缩js image对图片资源进行无损压缩 clean清空编译目录 sitemap生成站点地图，便于SEO watch...监听文件，当发生改动时调用相应的任务 build用于构建编译文件 default默认任务，使用gulp命令执行的任务 browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼 rebuild...当资源文件更新时让browser-sync重新加载变更 完成这些之后，可以使用gulp + 任务名称执行相应的任务 结束语 这是我的前端工作流，构建静态页面速度是不是一下子就提升了呢。
如果你业务比较复杂，需要使用 webpack 做深度定制，那么常见组合是：项目 - webpack，组件 - gulp。 但项目与组件的编译存在异同点，不同构建工具支持的生态也存在异同点。...webpack parcel gulp 生态的区别 babel 一般不会解析模块，也就是一般仅做代码预处理，而不会改变文件结构，也对 require、import 语句不敏感。...历史上由于 gulp 是作为 grunt 的替代品出现，当时要解决的问题是处理浏览器兼容问题，打包 scss 或 less，做一些公共资源替换，雪碧图等，最后可以顺带合并到一个文件，但模块化功能远远比...组件构建的目的主要在于发布 NPM，除了 ESNext 规范会使用 Babel 编译成 ES3，大部分代码写的很收敛，甚至对 SASS 的使用都要与 Typescript 插件一起组合成复杂的 Gulp... ); 在上面三个文件中，我们分别利用了 Typescript 编译、SCSS 编译、css-modules 解析、worker-loader 解析（利用 webpack
，确实是为了 unpkg 准备的，用了 ts-loader 和 babel-loader： 而 css 部分则是用了 less 编译： gulp 是用来组织编译任务的，可以让任务串行、并行的执行。...这里的 gulp.series 就是串行执行任务，而 gulp.parallel 则是并行。...所以说，那 3 种代码加上 css 文件是怎么打包的就很清晰了： 其中用到 gulp 只是用来组织编译任务的，可用可不用。...把所有组件的 scss 都放在了 semi-foundation 这个目录下来维护： 所以编译的时候就是这样的： 就是把 semi-foundation 这个目录下的所有 scss 编译后合并成了一个文件...并且编译任务都是用的 gulp 来组织的，它可以串行、并行的执行一些任务。 虽然有一些细小的差别，但从整体上来看，这三大组件库的编译打包逻辑可以说是一模一样的。 写这样的 scripts 麻烦么？
基本概念 首先从概念上，我们可以清楚的看出，Gulp和Webpack的侧重点是不同的。...）来让gulp实现不同的功能，从而构建整个前端开发流程。.../build/prd/styles/'));//编译后的输出路径 }); 上面这个task可以对'src/styles/*.scss'目录下的所有以.scss结尾的文件进行预处理。...接下来应该介绍一下Webpack的模块化实现了，其实也就没什么可以说的了，文件目录和Gulp的基本相同，只不过实现过程中使用到的插件或者说模块不同，配置不同而已。...console.log('所有任务队列执行完毕'); }); ``` 这样，一个简单的sass预处理的task就配置完成了，然后我们还将该task加到gulp.watch()上实现了自动编译（即修改
（后来发现，不同人的电脑，管理员目录是不一样的：有的是C:\Users\Administrators，但是有的人是在一个Appdata的隐藏文件夹下的更深的目录里) 本地目录：除c盘以外，任何其他硬盘中一个你放置自己项目的文件夹路径...gulpfile.js文件，他是gulp项目的配置文件，不同于backage.json文件。...（疑问：gulpfile.js的位置，可以随着不同的项目新建不同的文件，然后分别放到不同项目的根目录下？...10．Gulp实践---使用gulpfile.js并调用gulp插件 gulpfile.js 一个gulpfile.js配置文件类似下边这段代码，他的大体结构都是差不多的，只是你用到的任务不同的时候，他就是不同的任务代码.../*.scss', ['sass']); 17 gulp.watch("*.html").on('change', reload); 18 }); 19 20 //编译sass。
后来发现可以直接用 编辑器写代码 + “微信web 开发者工具”做预览功能 的组合方式进行开发，嗯开发舒适度好了点。...项目主页 Github 项目主页地址：https://github.com/Jeff2Ma/WeApp-Workflow （欢迎Star 一个~） 功能说明 SCSS 实时编译为 WXSS 使用Sass...scss文件会实时编译为微信小程序支持的.wxss文件。 WXSS(CSS) 中px 单位转小程序单位rpx 以官方推荐的iPhone 6 为标准设计格式，开发中直接写px 即可自动转换为rpx。...3.增量更新机制，运行起来更快 引入Sass 的增量编译以及图片相关任务的增量更新机制，让工作流运行速度更快。 使用姿势 使用方式在本文这里就不详细说明了，请前往项目主页的README 进行了解。...使用WeApp-Workflow 配合做小程序开发，直接使用第三方编辑器（WebStorm、Sublime Text 等）编辑src目录下的文件，保存修改后gulp 进程会实时编译到dist目录相应的位置
构建就是做这件事情，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容。 代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等。...Gulp被设计得非常简单，只通过下面5种方法就可以支持几乎所有构建场景： 通过gulp.task注册一个任务； 通过gulp.run执行任务； 通过gulp.watch监听文件的变化； 通过gulp.src...文件编译：通过parser配置文件解析器做文件转换，例如将ES6编译成ES5。 压缩资源：通过optimizer配置代码压缩方法。...注入钩子，最后输出由多个模块组合成的文件。...图1 Webpack 简介 一切文件如JavaScript、CSS、SCSS、图片、模板，对于Webpack来说都是一个个模块，这样的好处是能清晰地描述各个模块之间的依赖关系，以方便Webpack对模块进行组合和打包
有用过Sass 这类CSS 预处理器都知道10s+ 意味着什么，你每保存一次.scss 文件，都必须等上10s 以上才能看到你所改动的效果。如此一来十分尴尬，因为你直接写原生的CSS 语法比这还快。...b.scss，接下来的pipe 中只有 b.scss 去编译而a.scss 不会。...兼顾Sass 依赖关系的增量编译 熟悉的CSS 预处理器的都知道，一个scss 文件中可能会（被）@import，@include ，@extend 了外部scss 或相关代码段。...如此如果按照上面的方案，当a.scss @import 了_c.scss，而当你改动了_c.scss，在上面的机制下，a.scss 的出口文件a.css 是没有被相应更新到的。...解决方法也呼之欲出了，在cached() 与 sass() 的pipe 的中间我们还需要一个步骤，即将传入的改动文件找出其上下关系的依赖文件，整体文件集传入到 sass() 的pipe 去执行编译。
本篇文章你可以学到： 如何使小程序支持scss； 怎样通过gulp编译你的项目； 项目常用的模块封装； 小程序同webview之间如何优雅的进行交互； 集中式管理你的项目提高可维护性； 提升开发效率的小工具编写...根据要解决的问题来看，无非是文件的编译，修改，拷贝这些处理，对于这些需求，我们想到基于流的 gulp非常的适合处理，并且相对于webpack配置多页应用更加简单。..."gulp": "^3.9.1" "gulp-sass": "^4.0.2" scss编译插件 "gulp-postcss": "^6.4.0" 强大的css处理插件 "gulp-rename":...启用gulp-sass编译scss文件， 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...拷贝其余页面，注意要排除scss文件，或者使用gulp-clean清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?
package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了） 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样：...下面统一介绍几个常见的 插件，更详细用法可以到对应官方站点查看API sass的编译（gulp-ruby-sass） 自动添加css前缀（gulp-autoprefixer） 压缩css（gulp-minify-css...; }); 解释一下，其实就是 将sass文件编译成css，以流的形式pipe结果，再加css前缀，修改后缀为.min.css，并作资源压缩，最后成功后返回done的消息 命令行键入...这个watch是一个监听的任务，下头会讲到 然后gulp.start 再执行上述的那两个任务。.../build/static/test.min.css').on('change',livereload.changed); }); 解析：第二行是指监听那个scss文件，如果有改动就执行styles的那个任务
本篇文章你可以学到： 如何使小程序支持scss； 怎样通过gulp编译你的项目； 项目常用的模块封装； 小程序同webview之间如何优雅的进行交互； 集中式管理你的项目提高可维护性； 提升开发效率的小工具编写...根据要解决的问题来看，无非是文件的编译，修改，拷贝这些处理，对于这些需求，我们想到基于流的 gulp非常的适合处理，并且相对于webpack配置多页应用更加简单。..."gulp": "^3.9.1" "gulp-sass": "^4.0.2" scss编译插件 "gulp-postcss": "^6.4.0" 强大的css处理插件 "gulp-rename...启用gulp-sass编译scss文件， 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...拷贝其余页面，注意要排除scss文件，或者使用gulp-clean清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?
那container和component文件夹下面放在什么呢？我们放置了组件相关的逻辑js和样式scss文件。...这套文件架构比较传统的gulp和grunt复杂，但却更符合React + Redux这套方案的开发思路。...针对React的优化点 需要维护两套构建配置 Webpack跟Gulp和Grunt不同，前者属于配置型构建（当然也可以通过插件去做一些流程），后两者属于任务型的构建。...以前在用Gulp开发的时候，也会写一些任务专门针对开发或者生产的环境，分别再建两条任务流，分别去处理开发与生产环境的构建。...但面对React的项目，我们每一个component都有自己对应的index.js（处理逻辑）和index.scss（处理样式），由于这个合图插件只能标出一个图片路径，因此如果合图的引用发生在不同层次的
结构说明 assets 项目资源目录，dev 开发目录，dist 编译输出目录，gulpfile.js 自动化工具 API gulp 的使用 安装 node 环境 (自行 goole 即可) 全局安装...gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del sass的编译 (`gulp-ruby-sass`) 自动添加...运行 task 任务 $ gulp 监听文档实现实时编译 $ gulp watch gulp 的 API 请查看 gulpfile.js 文件 scss 文件规范以及说明 各个小模块以下划线开头全小写命名...多单词以 - 符号分隔，总模块正常，以该模块文件夹命名，在其中导入需要的小模块 (详细规则请查看 font-awesome 的 scss 源码，更多内容 google 脑补) 例： _path.scss...路径配置文件，_mixins.scss 预编译文件，_variables.scss 变量定义文件，font-awesome.scss 模块导入文件 脚本使用说明 基本组件 error.js 用途：低版本浏览器访问限制
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1、去nodejs官网安装nodejs 2、打开命令行，OSX是终端，...安装需要的gulp组件（绿色部分为需要安装的组件）另sass编译需提前安装ruby。...gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件 24 .pipe(sass()) 25 .pipe(autoprefixer.../images/sprite'+timestamp+'.png'// 生成样式文件图片引用地址的路径,如：backgound:url(.....：gulp+回车=进行单次编译 10、gulp watch监听文件修改自动执行，Ctrl+C停止监听 以上内容来自网络整理及实际操作，如有不当欢迎讨论
")); } exports.default = build; gulp-rename： 可以便捷的在输出编译产物到文件中时对文件命名进行调整，已适应不同的场景。...(); return src("src/*.js") .pipe(uglify()) .pipe(dest("output")); } gulp-sass： 将我们编写的 sass 文件编译为浏览器可以正常识别的...: 100px; color: #F90; } 改变我们的 build 任务函数后执行 gulp 得到的产物与教程得到了一直的内容： function build() { return src(..."src/*.scss") .pipe(sass().on("error", sass.logError)) .pipe(dest("output/css")); } gulp-open...： 支持我们在编译后打开一个文件或 URL，往往在开发过程中使用的 CLI 都提供了这样的一个功能，方便我们在启动项目后就默认给我们打开了首页。
；再就是它的 I/O 操作也是个弊病，它的每一次任务都需要从磁盘中读取文件，处理完后再写入到磁盘，例如：我想对多个 less 进行预编译、压缩操作，那么 Grunt 的操作就是：读取 less 文件 -...> 编译成 css -> 存储到磁盘 -> 读取 css -> 压缩处理 -> 存储到磁盘这样一来当资源文件较多，任务较复杂的时候性能就是个问题了。...早期需要手动在命令行中输入 jshint test.js，而 Grunt 则通过文件 Gruntfile.js 进行配置Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出...('build'));});// 将代码检查和压缩组合，新建一个任务gulp.task('default', ['lint', 'compress']);再一个对文件读取是流式操作（Stream），也就是说一次...I/O 可以处理多个任务，还是 less 的例子，Gulp 的流程就是：读取 less 文件 -> 编译成 css -> 压缩处理 -> 存储到磁盘在 Grunt 与 Gulp 对比看来还是比较推荐
在package.json文件中添加要安装的包 "devDependencies": { "browser-sync": "^2.26.7", "gulp": "^4.0.2",...": "^1.1.0", "gulp-uglify": "^3.0.2", "gulp-watch": "^5.0.1" } } 安装包,自动识别package.json文件中需要的包.../dist/css/')) //压缩后存放的路径 .pipe(bs.reload({ stream: true })); done(); }); //js任务...把index.css改成index.scss文件 ?.../dist/css/')) //压缩后存放的路径 .pipe(bs.reload({ stream: true })); done(); }); //js任务
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
