2015.04.08 更新：以下内容已多有改变，请以Github 上的Readme 为主。...Sass（gulp-sass） Sass 是与 Less 并举的 CSS 预处理器，一种全新的CSS 编码方式。...文件清理功能（gulp-clean） 在项目完成可以删除一些多余的文件 任务错误中断自动重传（gulp-plumber） 好吧，“任务错误中断自动重传”是我瞎命名的。...默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流（如在 watch Sass编译时候恰巧 Sass代码写错了）。使用plumber 模块可以在纠正错误后继续执行任务。...4、然后捏，就基本上可以的了，默认任务： $ gulp 5、如果项目已经完成，可以通过build 命令进行项目相关文件收集，项目文件最终会汇集到项目目录下的build 文件夹中方面进一步操作 $ gulp
"gulp-sass": "^4.1.0", "gulp-uglify": "^3.0.0", "path": "^0.12.7" } 如图： ?...在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误...'gulp-sass'); 监听任务 工程目录如图： ?...()); }); //监听处理css的任务 gulp.task('css',function(){ gulp.src(paths.css+"*.scss") .pipe(sass().on('error...':"./" } }); }); //创建一个默认的任务 gulp.task('default',['bs','watch']); 使用gulp命令开启default默认任务之后，此时更改src
/dist')); 32 }); 33 // 34 //// 默认任务 35 gulp.task('default', function(){ 36 gulp.run('lint', 'sass...这个情况是提醒我graceful-fs的版本太低 其他的报错，很大的可能就是你命令输入错误导致没装成功，一般就是字母输入错误，空格用了全角，标点用了全角等问题 遇到了再贴图吧。 ...//定义默认执行的任务task 1 gulp.task('default',['my task 1','my task 2'],function(){ 2 console.log('ok'); 3 })...所谓的默认任务: 他只有唯一的名字就是default 也就是说，只要你有一个任务定义了名字是default，那么你直接运行gulp或者gulp+任务名（比如这里用gulp sass）的方式运行，他都会率先执行你...//然后在命令行里直接执行gulp，不用填写执行的任务名字，他就可以自动执行默认的task，然后转向指定的其他依赖的task了、。 //可以比喻成你设置一条流水线作业吧。
'baseDir':'./', } }) }); //创建一个默认任务 gulp.task("default",gulp.parallel('bs','auto')); 3.3....css改为sass 安装sass包 npm install gulp-sass --save-dev ?...gulpfile.js修改 var sass = require("gulp-sass"); // css任务 gulp.task("css",done =>{ gulp.src("....sass = require("gulp-sass"); //html任务 gulp.task("html",done =>{ gulp.src("....'baseDir':'./', } }) }); //创建一个默认任务 gulp.task("default",gulp.parallel('bs','auto'));
：https://github.com/zellwk/gulp-starter-csstricks 译者注：发现这篇文章很棒，所以就翻译了，能力有限，有错误可以指出。...对于这篇文章，我们将使用以下结构来构建项目： |- app/ -----|- css/ -----|- fonts/ -----|- images/ -----|- index.html -...gulp.src告诉Gulp任务，所要使用的文件。gulp.dest`告知当任务完成后，Gulp输出文件的地址。 让我们来尝试构造一个真实的任务，将Sass文件编译成CSS文件。...你可以安装gulp-sass到你的项目中，通过使用以下命令 $ npm install gulp-sass --save-dev 在我们使用插件之前，我们需要从node_moudles文件夹中require...('gulp-sass'); 我们可以使用gulp-sass通过将aGulpPlugin()替换成sass(),因为任务用来将Sass编译成CSS，所以让我们将他命名为'sass' gulp.task(
以下代码是使用代理去实现： var gulp = require('gulp'); var browserSync = require('browser-sync').create(); gulp.task...('*.html').on('change', browserSync.reload); }); 运行命令，默认的浏览器会自动打开 127.0.0.1:3000 链接 gulp serve...在使用了 Grunt 的一段时间后，我发现了 gulp 的运行速度比 Grunt 快很多，于是便从 Grunt 转移阵地到了 gulp。以下的构建思路跟 Grunt 的构建很类似。...其中专门创建一个 gulp 目录用来存放 gulp 代码，为了能够将任务更加细化，职责单一，方便日后的维护更新。...└─ gulp/ # gulp 配置目录 ├─ tasks # 任务配置目录 ├─ image.js #
在layouts目录创建以下文件，如果有多套模版可以在layouts下创建子目录区分。...下面是我对gulp任务，使用CoffeeScript，然后我会讲解一个任务。...) imagemin = require('gulp-imagemin') sass = require('gulp-ruby-sass') minifycss = require...如果能看懂这个任务其他也都ok了。 gulp.task 'styles', -> return sass('....监听文件，当发生改动时调用相应的任务 build用于构建编译文件 default默认任务，使用gulp命令执行的任务 browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼 rebuild
// 删除过时前缀，默认true flexbox: true // 为flexbox属性添加前缀，默认true })) .pipe...描述：有条件地运行一个任务。.../dist')) gulp-sass 描述：编译sass。 var sass = require('gulp-sass'); gulp.src('..../sass/**/*.scss') .pipe(sass({ outputStyle: 'compressed' // 配置输出方式,默认为nested.../sass/**/*.scss', ['sass']); // 实时监听sass文件变动,执行sass任务 gulp-babel 描述：将ES6代码编译成ES5。
default 默认任务 当我们运行 gulp 命令时，Gulp 将会执行 default 默认任务，而该任务具体代码如下所示： // default.js const gulp = require(...'gulp'); gulp.task('default', ['watch']); 可以看到 default 任务并没有执行任何操作，但执行 defalut 任务前，我们需要先执行 watch 任务，我们再来看看...}); 图片 我们之前介绍过 Less 在 Gulp 的用法，这里再贴一下 Sass 的部分，相对于直接将 Sass 转换成 CSS，我们还加入了 PostCSS 的一些插件 // sass.js const.../config').sass; gulp.task('sass',() => { const processors = [ autoprefixer, cssnano...]; return gulp.src(config.src) .pipe(sass().on('error',sass.logError))
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...该任务调用的模块,即上面定义的 var scss = require('gulp-sass'); .pipe(gulp.dest('css')); //将会在css文件夹下，生成对应的...现在你可以真正开始安装gulp并开始调用一些简单的任务。使用以下命令全局安装gulp。 sudo npm install gulp -g 请注意，你也可以使用相同的命令进行更新。...此时您可以运行第一个任务。运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中： gulp scss 请注意，在本示例中，我们指定了要运行的任务。...为了启动它，请使用以下命令： gulp 这个命令启动名为 “default”并开启watcher.的任务，此时，您可以编辑任何SCSS文件，并重新编译CSS文件。
下面统一介绍几个常见的 插件，更详细用法可以到对应官方站点查看API sass的编译（gulp-ruby-sass） 自动添加css前缀（gulp-autoprefixer） 压缩css（gulp-minify-css...然后进入 gulpfile.js文件，先直接require var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer...原本打算直接用src的形式，没料到会出错，难道是 gulp-ruby-sass 不支持这种写法？ ? ?...; }); 当然，现在有两个任务了，直接gulp [task]未免太麻烦 命令行 gulp默认执行的是default的任务 所以可以这么玩： gulp.task('default',[...这个watch是一个监听的任务，下头会讲到 然后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清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?...代码实现 写入和读取均支持key ---> value的普通方式也兼容key--->value--->module的模块方式，默认使用同步的方式设置，之所以加catch是为了防止在特殊情况下小程序会报警设置缓存错误
之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是一个最简单的gulpfile.js文件内容示例，它定义了一个默认的任务。...default的默认任务。...--save-dev gulp-sass var gulp = require('gulp'), sass = require("gulp-sass"); gulp.task('compile-sass...', function () { gulp.src('sass/*.sass') .pipe(sass()) .pipe(gulp.dest('dist/css')); });...()方法 gulp.watch('less/*.less', ['less']); }); 如对gulp还有什么不明白之处，或者本文有什么遗漏或错误，欢迎一起交流和探讨~
的js文件，如果两个都含有同一任务，不特殊说明的话，命令行只执行文件名为gulpfile.js的任务），在命令行输入 npm install gulp --save-dev（之前没有安装过gulp的话...js压缩插件，有四个可选属性，分别为 mangle：是否混淆变量名，默认为true(混淆)，全局变量不会被混淆，之前看到有的代码中的require被混淆掉了，导致代码错误，这个需要注意一下。...如果是sass开发，就下载gulp-sass的相关插件。 gulp-minify-css 一个压缩css的插件，与uglify类似，只不过一个压缩JS，一个压缩CSS。...任务的插件，在实际场景中，不允许我们同时跑很多任务，因为任务之间往往是相互依赖的，此时run-sequence就是一个很好的选择，他可以让多个任务按照写入顺序执行，同时可以控制哪些任务并行跑，哪些按照顺序跑...比如： gulp.task('two', ['one'], function() { //任务two,会在任务one结束之后执行 }); 但个人还是更喜欢，用run-sequence因为一旦依赖项变多之后
"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清理无用文件 ? 建立监听任务 ? 创建默认执行任务 ?...代码实现 写入和读取均支持key ---> value的普通方式也兼容key--->value--->module的模块方式，默认使用同步的方式设置，之所以加catch是为了防止在特殊情况下小程序会报警设置缓存错误
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...； 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。...gulp任务，本地安装gulp则是为了调用gulp插件的功能。...']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务 //gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称...或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...cnpm -g –registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误...； 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。...']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务 //gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称...gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。
(); return src("src/*.js") .pipe(uglify()) .pipe(dest("output")); } gulp-sass： 将我们编写的 sass 文件编译为浏览器可以正常识别的...css 文件，我们要同时安装 sass 和 gulp-sass 插件。...const sass = require('gulp-sass')(require('sass')); 下面的代码是 sass 教程的第一块内容，将变量插入到最后编译的结果中。...width: $width; color: $nav-color; } //编译后 nav { width: 100px; color: #F90; } 改变我们的 build 任务函数后执行...)) .pipe(dest("output/css")); } gulp-open： 支持我们在编译后打开一个文件或 URL，往往在开发过程中使用的 CLI 都提供了这样的一个功能，方便我们在启动项目后就默认给我们打开了首页
常用Api gulp 的常用 API + 前提: 下载 gulp 第三方, 导入以后使用 1. gulp.task() => 语法: gulp.task(任务名称, 任务处理函数) =>..., 一旦发生变化, 从新执行后面的任务 => 例子: gulp.watch('....=> 语法: gulp.series(任务1, 任务2, 任务3, ...) => 作用: 逐个执行多个任务, 前一个任务结束, 第二个任务开始 6. gulp.parallel() =>...语法: gulp.parallel(任务1, 任务2, 任务3, ...) => 作用: 并行开始多个任务 7. pipe() => 管道函数 => 所有的 gulp API 都是基于流...3. $ npm i gulp-sass -D => 导入: const sass = require('gulp-sass') => 导入以后得到一个可以处理流文件的函数, 直接再管道函数里面执行就可以了
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
