: Sass转换器 file-loader: 文件转换器 handlebars-loader: Handlebars转换器 html-loader: HTML转换器 image-loader: 图像压缩转换器...eslint: JS校验 font-spider: 字体压缩 font-spider-plus: 字体压缩(升级版) happypack: 并行处理 less: CSS编译 node-sass: Sass...会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。...: Sass转换器 file-loader: 文件转换器 handlebars-loader: Handlebars转换器 html-loader: HTML转换器 image-loader: 图像压缩转换器...eslint: JS校验 font-spider: 字体压缩 font-spider-plus: 字体压缩(升级版) happypack: 并行处理 less: CSS编译 node-sass: Sass
Gulp侧重于前端开发的 整个过程 的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等...先来看看大背景，由于现在前端越来越庞大，页面文件依赖也越来越多，所以对这些文件进行合理的合并和压缩就志在必得。...Gulp合并压缩文件 css的压缩 要想实现Gulp对css文件的压缩只需要安装一个gulp-minify-css模块即可。 1....js合并压缩 要想实现Gulp对js文件的合并压缩需要安装一个gulp-uglify和gulp-concat两个模块，前者是用于压缩的模块，后者是一个合并的模块。 1....但是，这个功能是需要结合上一小节中的``gulp.watch()``实时监控文件变化，然后执行合并压缩和sass/less编译等操作后，浏览器再刷新时才能保证是我们修改后的内容。
另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。 来看一个 Sass 语法格式的简单示例。...('grunt-contrib-watch'); grunt.registerTask('default',['watch']); } Gulp 配置 Sass 编译的示例代码 var gulp...= require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('....“ --style compressed”: sass --watch test.scss:test.css --style compressed 压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格...一段时间之后，你实际上就不再需要写 CSS 代码了，只用写 Sass 代码。在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。
/dist/css/')) //压缩后存放的路径 .pipe(bs.reload({ stream: true })); done(); }); //js任务.../src/css/*.scss") .pipe(sass().on("error",sass.logError)) .pipe(cssnano()) //压缩 .pipe(rename.../dist/css/')) //压缩后存放的路径 .pipe(bs.reload({ stream: true })); done(); }); //监听.../src/css/*.scss") .pipe(sass().on("error",sass.logError)) .pipe(cssnano()) //压缩 .pipe(rename.../dist/css/')) //压缩后存放的路径 .pipe(bs.reload({ stream: true })); done(); }); //js任务
Gulp预处理 在Gulp中，我们可以将Sass编译成CSS，使用一个叫做gulp-sass的插件。...main-min.png 但是这个文件现在并没有被压缩。我们将使用gulp-uglify插件，来压缩JavaScript文件。...--endbuild--> 我们也要压缩连接后的CSS文件。我们需要使用一个叫做gulp-cssnano的插件来帮助我们压缩。...压缩图片，是一个极其缓慢的进程，除非必要，你是不会想重复的。为了做好这个，我们可以使用gulp-cache插件。...我们编译Sass为CSS，压缩我们所有的资源文件以及复制必要的文件夹到dist文件夹。我们可以在命令行中运行gulp build来运行这个任务。
本文作者：IMWeb 林鑫 原文出处：IMWeb社区 未经同意，禁止转载 本文主要展示的是gulp常用插件的使用方法和用途，通过对插件的熟练运用达到精通gulp。不定期更新。...这个文件 .pipe(uglify()) // 对其他文件进行压缩 .pipe(f1.restore) // 返回到未过滤执行的所有文件....pipe(gulp.dest('dist')); // 再对所有文件操作，包括index.js 压缩 gulp-uglify 描述：压缩js文件大小。.../dist')) gulp-sass 描述：编译sass。 var sass = require('gulp-sass'); gulp.src('..../sass/**/*.scss', ['sass']); // 实时监听sass文件变动,执行sass任务 gulp-babel 描述：将ES6代码编译成ES5。
了解 了解 gulp 前端自动化打包构建工具 => 打包: 把文件压缩, 整合, 移动, 混淆 了解一下前端的打包构建工具 gulp: 基于流的打包构建工具 webpack: 基于 js 文件的打包构建工具...文件 => 压缩 => 转码(自动添加前缀) 对于 js 文件 => 压缩 => 转码(ES6 转 ES5) 对于 html 文件 => 压缩 => 转码(对格式的转换) 对于静态资源文件的处理 对于第三方文件的处理...=> 接收当前流, 进入下一个流过程的管道函数 => 例子: gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc')) 常用插件 gulp...常用插件 + gulp 的各种插件就是用来执行各种各样的压缩混淆转码任务的 1. gulp-cssmin => 下载: npm i gulp-cssmin -D => 导入: const...3. $ npm i gulp-sass -D => 导入: const sass = require('gulp-sass') => 导入以后得到一个可以处理流文件的函数, 直接再管道函数里面执行就可以了
例如：对sass文件进行预编译： gulp.task('sass',function(){ gulp.src('src/styles/*.scss') .pipe(sass().on('...error',sass.logError)) .pipe(gulp.dest('....Gulp可以对 css、js 文件进行合并与压缩，而 Webpack可以实现对css、js、html、图片文件等进行合并与压缩，还可以对js文件进行编译，如es6->es5等。...2，在 vue.config.js 中配置文件压缩选项 针对js和css文件的压缩，Webpack已经内嵌了uglifyJS来完成对js与css的压缩混淆，无需引用额外的插件。...-- 使用带有全局变量的样式 --> button ...
抽离公共组件样式的模块，使得CSS的开发变得简单可维护，使页面可组合； 使用Compass，自动生成雪碧图并且CSS同时生成背景坐标，提升重构效率； 编写SASS公共方法，减少重复CSS代码，提升重构效率...（包括compass自带方法函数）； 结合gulp构建工具，对雪碧图自动合并，sass生成，文件部署快速部署，项目的分类进行统一管理； 重构构建的深度扩展 主要是以项目2.0版本为基础进行构建优化 第一个版本引出的问题...利用gulp实现include双向绑定，更改include同时会更新完整静态html，并且浏览器会检测更改自动刷新 CSS：SASS CSS模块通过SASS进行组件化区分，避免引用多余的组件样式 搭建...CSS 为什么不将CSS合并与压缩功能做在gulp中，却做到管理端上？...如果做到gulp中，会不方便后期的改版维护，在发布时，因为都是压缩过的CSS代码，不便和线上进行对比。虽然有SVN，但是为了保证一切以线上为主的基础，还是会对线上的代码进行对比。
安装需要的gulp组件（绿色部分为需要安装的组件）另sass编译需提前安装ruby。...2 * gulp 3 * $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint...--save-dev 4 */ 5 // 加载插件 6 var gulp = require('gulp'),//加载gulp 7 sass = require('gulp-sass...18 cache = require('gulp-cache'),//压缩图片过滤（仅修改图片压缩） 19 livereload = require('gulp-livereload'...gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件 24 .pipe(sass()) 25 .pipe(autoprefixer
前言 我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1… 本次目标 es6 转换成 es5 图片压缩 scss编译 模板html...} = require('gulp') const sass = require('gulp-sass')(require('sass')); // 5.0版本的gulp const style...复制代码 这样我们就可以把我们在网页中写死的数据放入，就可以进行一些模板的渲染了 图片和字体压缩 这里我们要进行图片的压缩： yarn add gulp-imagemin --dev // 这里有一个坑点...('gulp-babel') // 模板 const swig = require('gulp-swig') // 图片、svg压缩 const imagemin = require('gulp-imagemin...'); 复制代码 这样的引用我们都可以使用plugins.xxx进行使用，像sass我们就可以直接plugins.sass(),plugins.imagemin()等等 例如 gulp-sass就是plugins.sass
，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，例如： var gulp = require('gulp'); gulp.src...进行压缩,更多配置请参考： .pipe(gulp.dest('dist/js')); //压缩后的路径 }); 4.4 css文件压缩 使用gulp-minify-css 安装：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')); });...4.9 图片压缩 可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。
gulp 初试用 在用了 Grunt 的一段时间内，越来越觉得自己离不开构建工具。但是，Grunt 的构建速度让我有点苦恼，即使是编译 sass 也需要花上一段时间。...'); // sass 编译 gulp.task('sass:dev', function() { return gulp.src('dev/sass/**/*.scss') .pipe(...:dist', 'rev:css', cb ); }); 第三个步骤是 js 文件的打包，打包 RequireJs 代码可以根据依赖进行 js 文件的合并压缩...:html', cb ); }); 最终生成的代码依然在 dist 目录下，也就是说在开发阶段与上线打包阶段构建生成的代码都在同一个目录下，只不过在开发阶段代码是未进行合并压缩...，上线打包阶段代码是经过合并压缩打上 hash 戳的。
翻译过来就是，Fancybox 是一个 JavaScript 库，用于以优雅的方式呈现图像，视频和任何 HTML 内容。它具有您期望的所有功能——触摸启用，响应和完全可定制。...如果说我们在项目中使用 LESS，或者 SASS 作为 CSS 的预编译语言（浏览器本身是不支持 LESS，SASS 文件的，难道每次还要使用类似与考拉软件去处理这些吗？）...如果我想找一个东西帮我去处理上面的这些东西，我写的还是没有压缩的 JS 或者 CSS/less/sass 等，但是在页面上实际上运行（或者等到项目发布的时候替换为压缩过的文件），那么 gulp 就是你很好的选择...关于 npm，其实它是一个基于 node.js 的包管理工具，说的通俗一点就是，我们可以通过 npm 这个工具去下载我们想要的包，这些包就是我们在后面需要的各种各样的插件（比如压缩 JS 代码的插件，压缩...即devDependencies下列出的模块，是我们开发时用的，比如我们安装 js 的压缩包gulp-uglify时，我们采用的是npm install –save-dev gulp-uglify命令安装
下面统一介绍几个常见的 插件，更详细用法可以到对应官方站点查看API sass的编译（gulp-ruby-sass） 自动添加css前缀（gulp-autoprefixer） 压缩css（gulp-minify-css...） js代码校验（gulp-jshint） 合并js文件（gulp-concat） 压缩js代码（gulp-uglify） 压缩图片（gulp-imagemin） 重命名（gulp-rename） 自动刷新页面...比如安装压缩css的依赖包： npm install gulp-minify-css --save-dev 这里直接把所以依赖全支持上，因为都要用到。...; }); 解释一下，其实就是 将sass文件编译成css，以流的形式pipe结果，再加css前缀，修改后缀为.min.css，并作资源压缩，最后成功后返回done的消息 命令行键入...原本打算直接用src的形式，没料到会出错，难道是 gulp-ruby-sass 不支持这种写法？ ? ?
可以配合各种插件做js压缩，css压缩，less编译等，可以替代手工实现自动化工作；而webpack是文件打包工具，可以把项目的各种js文件、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案...Gulp侧重于前端开发的整个过程的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等...）、编译（complie）、压缩、重命名等处理后输出（gulp.dest）到指定目录中去，为了构建而打包 | 对入口文件（ entry ）递归解析生成依赖关系图，然后将所有依赖打包在一起，在打包之前会将所有依赖转译成可打包的...node-sass -D node-sass是sass-loader的内置依赖项，当使用sass-loader时必须同时安装node-sass模块。...定义背景图片 定义id值为box的div元素 设置id值为box的div元素的背景图片 #box{width: 580px;height
JGulp 包含的功能模块（插件） 小标题含义：功能（对应的Gulp 插件） Compass（gulp-compass） 一个Sass 框架，本工作量主要是Compass + Sass，因此熟悉这两者是使用本工作流的基础条件...Sass（gulp-sass） Sass 是与 Less 并举的 CSS 预处理器，一种全新的CSS 编码方式。...JS 文件合并（gulp-concat） JS 文件压缩（gulp-uglify） 图片无损压缩（gulp-imagemin + imagemin-pngquant） 经过实际使用发现，图片压缩略有损失...默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流（如在 watch Sass编译时候恰巧 Sass代码写错了）。使用plumber 模块可以在纠正错误后继续执行任务。...自动打包并按时间重命名（gulp-zip） 一般项目完成后需要整理文件并压缩以供交付使用或进行下一阶段的开发，本模块可以实现将项目文件自动打包并按时间重命名。
翻译过来就是，Fancybox 是一个 JavaScript 库，用于以优雅的方式呈现图像，视频和任何 HTML 内容。它具有您期望的所有功能——触摸启用，响应和完全可定制。...如果说我们在项目中使用 LESS，或者 SASS 作为 CSS 的预编译语言（浏览器本身是不支持 LESS，SASS 文件的，难道每次还要使用类似与考拉软件去处理这些吗？）...如果我想找一个东西帮我去处理上面的这些东西，我写的还是没有压缩的 JS 或者 CSS/less/sass 等，但是在页面上实际上运行（或者等到项目发布的时候替换为压缩过的文件），那么 gulp 就是你很好的选择...关于 npm，其实它是一个基于 node.js 的包管理工具，说的通俗一点就是，我们可以通过 npm 这个工具去下载我们想要的包，这些包就是我们在后面需要的各种各样的插件（比如压缩 JS 代码的插件，压缩...即 devDependencies 下列出的模块，是我们开发时用的，比如我们安装 js 的压缩包 gulp-uglify 时，我们采用的是 npm install –save-dev gulp-uglify
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程：文件流--文件流--文件流......因为grunt操作会创建临时文件，会有频繁的IO操作，而gulp使用的是流操作...因此gulp在效率上确实远胜grunt，并且学习成本不高，在这非常感谢刘剑辛的分享！...// 本地使用gulp npm install --save gulp-imagemin // 压缩图片 npm install --save gulp-minify-css //压缩css npm...install --save gulp-ruby-sass //sass npm install --save gulp-jshint //js代码检测 npm install --save gulp-uglify...//js压缩 npm install --save gulp-concat //文件合并 npm install --save gulp-rename //文件重命名 npm install --save
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
