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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
