首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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

使用一个名为 gulp-sass插件,这个插件基于libsass。我在这里选择使用libsass, 因为它比Ruby的替代方法更快,尽管它缺少一些功能。...var gulp = require('gulp'); var scss = require('gulp-sass'); 一开始我们需要初始化我们将要使用的所有插件。...使用Watcher 我创建了一个可以直接使用的watcher入门工具包。...你可以从 toptal-gulp-tutorial/step2下载它,它包括之前创建的SCSS任务的增强版本,以及一个观察检测源文件并调用任务的watcher。...要深入了解这个JavaScript自动化实现,我建议添加 gulp-notify ,当任务运行时通知你。此外,您可以创建一个单独的任务来最小化生成的CSS代码,并使“scss”任务作为依赖关系运行。

3.2K10

给初学者的Gulp教程(译)

如果你足够疯狂,你甚至可以使用Gulp创造一个静态页面生成器(我已经做到了!)。所以,Gulp是非常强大的,但是如果你想创建你自己的构建流程,你就要去学习如何使用Gulp。...Gulp预处理 在Gulp中,我们可以将Sass编译成CSS,使用一个叫做gulp-sass的插件。...你可以安装gulp-sass到你的项目中,通过使用以下命令 $ npm install gulp-sass --save-dev 在我们使用插件之前,我们需要从node_moudles文件夹中require...('gulp-sass'); 我们可以使用gulp-sass通过将aGulpPlugin()替换成sass(),因为任务用来将Sass编译成CSS,所以让我们将他命名为'sass' gulp.task(...供参考:Gulp-sass使用LibSass来将Sass转换成CSS。这比基于Ruby的方法要快。

4.3K20

Gulp安装流程、使用方法及cmd常用命令导览

,以gulp-sass为例。...cnmp install gulp-sass --save-dev 或者npm install gulp-sass --save-dev Gulp的插件很多,需要什么就去官网查:http://gulpjs.com...10.Gulp实践---使用gulpfile.js并调用gulp插件 gulpfile.js 一个gulpfile.js配置文件类似下边这段代码,他的大体结构都是差不多的,只是你用到的任务不同的时候,他就是不同的任务代码...,就输入 gulp,命令行会自动执行default任务,并按顺序执行'lint', 'sass', 'scripts'任务     三、盲区疑惑: 怎么卸载掉gulp(全局或本地的) 再次使用gulp,...api 详解 (说句人话就是gulpfile.js文件代码解读) 一个gulp-sass任务的案例: // 编译Sass 1 gulp.task('sass', function() { 2 3

2.3K60

武装你的小程序——开发流程指南

所以小程序工程化方案推荐使用 gulp。 Start 初始化一个项目,结构如下 ?..."gulp": "^3.9.1" "gulp-sass": "^4.0.2" scss编译插件  "gulp-postcss": "^6.4.0" 强大的css处理插件  "gulp-rename":...gulp配置打包sass非常简单,唯一需要注意的是@import的使用,wxss是支持样式导入的,但上面说到过小程序是天生的多页面应用,每一个页面都对应一个wxss,因此sass打包会把import的文件打包到当前文件...启用gulp-sass编译scss文件, 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...拷贝其余页面,注意要排除scss文件,或者使用gulp-clean清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?

3.9K40

武装你的小程序——开发流程指南

所以小程序工程化方案推荐使用 gulp。 Start 初始化一个项目,结构如下 ?..."gulp": "^3.9.1" "gulp-sass": "^4.0.2" scss编译插件 "gulp-postcss": "^6.4.0" 强大的css处理插件 "gulp-rename...gulp配置打包sass非常简单,唯一需要注意的是@import的使用,wxss是支持样式导入的,但上面说到过小程序是天生的多页面应用,每一个页面都对应一个wxss,因此sass打包会把import的文件打包到当前文件...启用gulp-sass编译scss文件, 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...拷贝其余页面,注意要排除scss文件,或者使用gulp-clean清理无用文件  ? 建立监听任务 ? 创建默认执行任务 ?

2K30

npm、cnpm、yarn三剑客

或 npm install gulp -S package.json文件的 dependencies 字段: "dependencies": { "gulp": "^4.0.2" } 安装开发阶段的依赖包...gulp -D package.json 文件的devDependencies字段: "devDependencies": { "gulp": "^4.0.2" } 安装可选阶段的依赖包 -O...gulp -O package.json文件的optionalDependencies字段: "optionalDependencies": { "gulp": "^4.0.2" } 精确安装指定版本依赖包..."dependencies": { "gulp": "4.0.2" } 模块的依赖都被写入了package.json文件后,他人打开项目的根目录(项目开源、内部团队合作),使用npm install...~和^ ~ 会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括1.3.0 ^ 会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3.0,但是不包括2.0.0

1K00

Gulp 工作流中Sass 增量编译功能的探索

虽然协作的同岗位同事也是同一个组的,但使用Gulp 工作流却有些不一样。第一天做项目需求的时候,就遇到了一件让我瞠目结舌的事情:这里的Sass 编译一次居然要10s 以上。...初级玩家的玩法 Gulp 工作流中集成Sass 编译一般都是用gulp-sass 这个模块,本质上gulp-sass 调用的是node-sass(C++ 版的Sass)。...熟悉Gulp 的都知道,默认的话Sass 中都是全量编译的,小项目玩家或初级玩家一般直接这么写: var gulp = require('gulp'); var sass = require('gulp-sass...var gulp = require('gulp'); var sass = require('gulp-sass'); var cached = require('gulp-cached'); gulp.task...而对应的Gulp 插件也有不少,不过本人使用的是在前人的基础上二次开发的 gulp-better-sass-inheritance。

1.4K60
领券