gulp.src告诉Gulp任务,所要使用的文件。gulp.dest`告知当任务完成后,Gulp输出文件的地址。 让我们来尝试构造一个真实的任务,将Sass文件编译成CSS文件。...所以让我们在app/scss文件夹中创建一个styles.scss文件。这个文件将会被加入到sass任务中的gulp.src中。....pipe(gulp.dest('app/css')) }) 其他在app/scss文件夹下找到的Sass文件,将自动被包括到sass任务中。...结束 我们已经经过了Gulp的基础以及创建了一个工作流,可以将Sass编译成CSS,同时监测HTML和JS文件发生改变。我们可以在命令行通过gulp命令运行这个任务。...我们也构建了第二个任务,build,创建一个dist文件夹给生产用网页。我们编译Sass为CSS,压缩我们所有的资源文件以及复制必要的文件夹到dist文件夹。
()) .pipe(gulp.dest('dev/css')); }); 比较一下 Grunt 与 gulp 编译同一套 sass 代码下所花费的时间: 并不是说 Grunt...其中专门创建一个 gulp 目录用来存放 gulp 代码,为了能够将任务更加细化,职责单一,方便日后的维护更新。...// 打包 css 文件 gulp.task('build:css', function(cb) { runSequence( 'usemin:css', 'sass...:dist', 'rev:css', cb ); }); 第三个步骤是 js 文件的打包,打包 RequireJs 代码可以根据依赖进行 js 文件的合并压缩...未解决的问题 开发阶段:对 RequireJs 的路径配置(config.js 与 gulp 中的配置)感到困惑迷糊,多创建一个目录就路径不匹配打包不成功。
文件中添加要安装的包 "devDependencies": { "browser-sync": "^2.26.7", "gulp": "^4.0.2", "gulp-cache".../dist/css/')) //压缩后存放的路径 .pipe(bs.reload({ stream: true })); done(); }); //js任务....css改为sass 安装sass包 npm install gulp-sass --save-dev ?...gulpfile.js修改 var sass = require("gulp-sass"); // css任务 gulp.task("css",done =>{ gulp.src("..../dist/css/')) //压缩后存放的路径 .pipe(bs.reload({ stream: true })); done(); }); //js任务
匹配除了index.js之外的所有js文件 gulp.src('....这个文件 .pipe(uglify()) // 对其他文件进行压缩 .pipe(f1.restore) // 返回到未过滤执行的所有文件.../dist/css')) gulp-rev-replace 描述:重写被gulp-rev重命名的文件名。...描述:有条件地运行一个任务。.../sass/**/*.scss', ['sass']); // 实时监听sass文件变动,执行sass任务 gulp-babel 描述:将ES6代码编译成ES5。
'gulp-sass'); 监听任务 工程目录如图: ?...()); }); //监听处理css的任务 gulp.task('css',function(){ gulp.src(paths.css+"*.scss") .pipe(sass().on('error...)) .pipe(bs.stream()); }); //监听处理js的文件任务 gulp.task('js',function(){ gulp.src(paths.js+"*.js") .pipe...(uglify()) .pipe(gulp.dest(paths.images_dist)) .pipe(bs.stream()); }); //监听处理图片文件的任务 gulp.task('images...':"./" } }); }); //创建一个默认的任务 gulp.task('default',['bs','watch']); 使用gulp命令开启default默认任务之后,此时更改src
-> 最终给出一个完整的成品 gulp 是基于流格式的一种打包构建工具 gulp 的依赖环境 依赖于 node 环境进行开发 底层封装的内容就是 node 里面的读写文件 gulp 的作用 对于 css...+ pages html + css css + js js + sass sass + images...+ 同级目录下, 再次新建一个叫做 pages 的文件夹 => 不行 ? 不能创建同名文件夹 + 同级目录下, 创建一个叫做 views 的文件 => 不行 ?...+ 必须要保证打包前后的目录结构一致 => 创建一个叫做 src 的目录(表示源码) => 创建一个叫做 dist 的目录(存放打包后的文件) */ gulp 1....作用: 创建一个基于流的任务 => 例子: gulp.task('htmlHandler', function () { // 找到 html 源文件, 进行压缩, 打包, 放入指定目录
在layouts目录创建以下文件,如果有多套模版可以在layouts下创建子目录区分。...', '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 + 任务名称执行相应的任务 结束语 这是我的前端工作流,构建静态页面速度是不是一下子就提升了呢。
2.配置可直接进行SASS文件分离的loader 若不需要sass文件分离,参考上一节的配置方式 const extractTextPlugin = require("extract-text-webpack-plugin...3.新建文件 3.1 scss文件建立 注意这里建立的文件格式是scss格式的。...: $nav-color; color:#000 ; margin: 50px ; } 3.2 添加标签 在src目录下的index.html文件中新增,如下: <div id="<em>sass</em>_part...在src目录下<em>的</em>entry.js中引入scss<em>文件</em> import less from './<em>css</em>/three.scss' 5.打包 使用webpack命令进行打包。...编译<em>css</em>,如果一切顺利的话,结束之后把<em>css</em>导出到规定<em>的</em><em>文件</em>去。
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...该任务调用的模块,即上面定义的 var scss = require('gulp-sass'); .pipe(gulp.dest('css')); //将会在css文件夹下,生成对应的....pipe(scss()) 在这里,我们调用之前定义好的gulp-sass插件 .pipe(gulp.dest('css')); 最后,我们使用“gulp.dest”定义文件的目标文件夹。...你可以从 toptal-gulp-tutorial/step2下载它,它包括之前创建的SCSS任务的增强版本,以及一个观察检测源文件并调用任务的watcher。...要深入了解这个JavaScript自动化实现,我建议添加 gulp-notify ,当任务运行时通知你。此外,您可以创建一个单独的任务来最小化生成的CSS代码,并使“scss”任务作为依赖关系运行。
,ADM,UMD 了,下面来介绍一下各自的特点; CommonJs: 文件作用域:每个文件即为一个单独的模块,模块中的内容未主动暴露则对外不可见; 缓存:模块的加载只发生在第一次导入,在之后的导入会优先读取缓存...来打包组件的样式代码: gulp 主要通过定义任务并使用流式的处理方式使用不同的管道依次进行,我们主要处理 scss 文件内容为 css 文件。...需要用到的模块如下: gulp-sass,因版本问题需要额外导入 sass 模块。 gulp-minify-css:主要用来对 css 文件进行压缩。...完整的打包配置如下: 配置文件指明了操作的文件入口为css 目录下的 scss 结尾的文件; 文件输出到 dist/css 目录下; 方便执行我们配一下打包命令:"build:css": "npx gulp...("gulp-minify-css"); gulp.task("sass", async function () { return gulp .src("components/css/**
注意:没有装cnpm的,这里用npm,以后不再赘述 5.定位目录, 定位目录:就是找到你要开始创建项目的位置,在这个位置再建一个gulp项目文件夹,以后就可以在这里开始工作了。...用法:盘符字母(大写)加冒号 dir 列出文件列表; mkdir newfile_name 创建新的子目录文件夹newfile_name; cls 清空命令提示符窗口内容。...'); 7 var rename = require('gulp-rename'); 8 //如下示例,加一个转css的任务: 9 // 检查脚本,纠错 10 // 11 gulp.task('lint...或者( gulp taskName) 直接调用gulp或者输入gulp+任务名称 比如在上边的gulpfile.js里边,我想调用sass任务,就直接在命令行输入gulp sass 如果我想调用所有的...css将注入到浏览器里实现更新 21 gulp.task('sass', function() { 22 gulp.src("scss/*.scss") 23 .pipe(sass
--save-dev //从本地把整个gulp文件夹拉过来 task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello',....pipe()通过pipe()去处理找出来的文件,可以理解为管道 .pipe(gulp.dest())处理好的文件放到指定地方 复制html文件 var gulp=require('gulp')...'); }); 监听任务 gulp.task('watch', function () { gulp.watch('a/*',['hello']); }); 使用插件来扩展gulp的功能 Sass...('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js')) }); Css文件压缩 npm install gulp-minify-css --save-dev..., function () { gulp.src('css/*.css') .pipe(cssmin()) .pipe(gulp.dest('dist/css')); }); html文件压缩
下面统一介绍几个常见的 插件,更详细用法可以到对应官方站点查看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...; }); 解释一下,其实就是 将sass文件编译成css,以流的形式pipe结果,再加css前缀,修改后缀为.min.css,并作资源压缩,最后成功后返回done的消息 命令行键入.../build/static/test.min.css').on('change',livereload.changed); }); 解析:第二行是指监听那个scss文件,如果有改动就执行styles的那个任务... 第三行是开启浏览器端的监听模式 第四行是监听某个css文件,比如我html文件引用了这个文件,它变化时浏览器就会自动刷新。
Gulp 前端自动化构建工具 中,已经对 Gulp 有了初步的了解,我们通过将所有任务写到 gulpfile.js 文件中进行编译,这当然是最直观的方法,但当我们需要执行的任务过多时,gulpfile.js...文件就会变的特别的巨大,这很不利于我们之后的维护及修改,所以我们要做的第一件事就是将 gulpfile.js 文件进行分割,分成一个个小的任务文件,每一个文件只完成特定的任务,这也是我们常说的模块化处理...,node_modules 文件夹下为依赖包,gulp 文件夹下为任务文件,src 文件夹下为项目的引用文件,该目录下的文件均为测试文件,各位童鞋可根据自身需求进行修改替换,build 文件夹为 gulp...}); 图片 我们之前介绍过 Less 在 Gulp 的用法,这里再贴一下 Sass 的部分,相对于直接将 Sass 转换成 CSS,我们还加入了 PostCSS 的一些插件 // sass.js const...、快速响应 HTML、CSS、JS、Sass、Less 等文件更改并自动刷新页面,更重要的是,可以同时在 PC、平板、手机等设备下进项调试,我们可以使用 Browsersync 提供的静态服务器,对我们的
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...function () { gulp.src('src/less/index.less') //该任务针对的文件 .pipe(less()) //该任务调用的模块...fn:回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options...创建webpack对象 var webpack = require("webpack") 创建gulp任务 //gulp --product gulp.task('default', function(...sass-loader') } ExtractTextPlugin是抽离css的插件。
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新..., function () { gulp.src('src/less/index.less') //该任务针对的文件 .pipe(less()) //该任务调用的模块...fn:回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options...创建webpack对象 var webpack = require("webpack") 创建gulp任务 //gulp --product gulp.task('default', function(...sass-loader') } ExtractTextPlugin是抽离css的插件。
在详细一点就是: 创建主页html文件 创建与之对应的app.js入口文件和app.scss入口文件。...在views目录下编写js(或css)文件的逻辑代码,其中如果多个文件需要公共逻辑或者工具方法,就可以抽离出来在util文件夹下创建对应的公共方法,然后在views中需要的js(或css)文件中通过CommonJS...Gulp合并压缩文件 css的压缩 要想实现Gulp对css文件的压缩只需要安装一个gulp-minify-css模块即可。 1....console.log('所有任务队列执行完毕'); }); ``` 这样,一个简单的sass预处理的task就配置完成了,然后我们还将该task加到gulp.watch()上实现了自动编译(即修改...总结 通过以上八个方面的功能对比,Gulp和Webpack基本都能满足前端自动化构建工具的任务,但是还是看出两个工具的侧重点是不通的,Gulp侧重整个过程的控制,Webpack在模块打包方面有特别出众。
gulp.src('app/src/**/*.css') //此时base的值为app/src,也就是说它的base路径为app/src //设该模式匹配到了文件 app/src/css/normal.css..."); gulp.task('minify-css', function () { gulp.src('css/*.css') // 要压缩的css文件 .pipe(minifyCss...('less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css')); }); sass使用gulp-sass,安装:npm install...--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组件(绿色部分为需要安装的组件)另sass编译需提前安装ruby。...(如第五步配置完成,此步忽略) npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint...2 * gulp 3 * $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint...gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件 24 .pipe(sass()) 25 .pipe(autoprefixer...40 // return gulp.src('css/*.css') 41 // .pipe(spriter({ 42 // // 生成的spriter的位置
领取专属 10元无门槛券
手把手带您无忧上云