本文深入探讨了Gulp这一流行的自动化工具，详细介绍了其安装、配置及常见插件的使用，如html压缩、js压缩、文件合并等，适用于前端开发者的自动化任务处理。
gulp
gulp是当下最流行的自动化工具 ，可以自动化完成我们开发过程中大量的重复工作
安装与运行
前提是安装了nodejs环境，测试nodeJs (node -v)，测试npm (npm -v)
- 全局安装 gulp
npm install -g gulp，全局安装gulp目的是为了通过它执行gulp任务
- 本地安装gulp
npm install gulp，本地安装gulp是为了调用gulp插件的功能，这步操作前先新建package.json文件(npm init)
- 创建gulpfile.js文件
在项目根目录下创建一个名为 gulpfile.js 的文件，gulpfile.js是gulp项目的配置文件
- 运行 gulp
gulp <任务名称>，如果有不需要编译的文件，只需要在文件前加下划线
gulp工作流程
- 先通过 gulp.src() 方法获取到想要处理的文件，并返回文件流
- 然后文件流通过 pipe 方法导入到 gulp 的插件中
- 经过插件处理后的文件流再通过pipe方法导入到 gulp.dest() 方法中
- 最后通过gulp.dest() 方法把流中的内容写入到文件中
文件流=>文件在内存中的状态
API
-
创建任务
gulp.task('buildsass',function(){ }); -
匹配要处理的文件
gulp.src(globs[, options]) // options 有3个属性buffer、read、base -
输出文件
把文件流中的内容中输出到指定目录
gulp.dest(path[, options])
-
监听文件修改，并执行相应任务
gulp.watch(glob [, opts], tasks)
gulp.watch(glob [, opts, cb])
gulp插件
- 安装插件
可一次性安装多个插件，插件间用空格隔开，卸载插件npm uninstall …(卸载不需要写–save, --save-dev就可以更新package.json文件)
npm install --save gulp-htmlmin
-
引包：require()
var htmlmin = require('gulp-htmlmin') -
使用：pipe()
gulp.task('htmlmin',function(){ gulp.src('src/html/*.html') .pipe(htmlmin()) .pipe(gulp.dest('dist/html')); });
常用gulp插件
- htmml压缩：gulp-htmlmin
- js压缩：gulp-uglify(ES6的有些语法可能不支持,所以压缩之前先用babel转成es5)
- 合并文件：gulp-concat
- 文件重命名：gulp-rename
- 编译Sass: gulp-sass
- 编译 Less：gulp-less
- 浏览器同步测试：browser-sync
- 创建node服务器：http-server
- 图片压缩：gulp-image
- css压缩：gulp-clean-css
- 补全浏览器兼容的css：gulp-autoprefixer
gulp-sass
gulp.task('compileSass', async()=>{
gulp.src("./src/sass/*.scss")
.pipe(sass({outputStyle: 'compact'}))
.pipe(gulp.dest("./src/css"))
});
<!-- 配置参数 -->
nested(默认）
expanded：展开
compact：单行
compressed：压缩
sass监听
gulp.task("jtSass", function(){
gulp.watch("./src/sass", gulp.series("compileSass"));
});
gulp-uglify, gulp-concat, gulp-rename
gulp.task("merge", async()=>{
gulp.src(["./src/js/*.js", "!./src/js/{all, all.min}.js"])
// 合并
.pipe(concat("all.js"))
.pipe(gulp.dest("./src/js"))
// 压缩
.pipe(uglify({compress: true}))
// 重命名
.pipe(rename({suffix: ".min"}))
.pipe(gulp.dest("./src/js"))
});
babel
- 全局安装babel-cli
- 局部安装babel-preset-es2015, babel
- 在项目目录建立.babelrc文件，内容：
{"presets": ["es2015"],"plugins": []} - 输出
- 转码结果写入一个文件，-out-file 或 -o 参数指定输出文件：
babel example.js -o compiled.js - 整个目录转码，–out-dir 或 -d 参数指定输出目录：
babel src -d lib
- 转码结果写入一个文件，-out-file 或 -o 参数指定输出文件：
http-server
- 全局安装http-server
- 启动：http-server，可以指定端口-p:
http-server -p 1000
browser-sync
gulp.task("server", async()=>{
browserSync({
// 创建一个静态服务器
server: "./src",
// 监听文件
files: ["./src/**/*.html", "./src/**/*.css"],
// 指定端口
port: 10000,
// 代理服务器，代理php服务器，能够识别php
proxy: "http://localhost:10000"
})
// 监听sass的修改
gulp.watch("./src/sass", gulp.series("compileSass"));
});
gulp-image
gulp.task("imageMin", async()=>{
gulp.src("./src/img/*")
.pipe(image())
.pipe(gulp.dest("./image"))
});
gulp-autoprefixer
gulp.task('cssPre', async()=>{
gulp.src('./src/css/*.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./cssTest'))
});
gulp-clean-css
gulp.task("cssMin", async()=>{
gulp.src('./cssTest/*.css')
.pipe(cssmin({
advanced: true,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('./cssMin')) // 将会在dist/css下生成index.css
});
globs语法
globs需要处理的源文件匹配符路径，语法如下
- 匹配单个文件：
gulp.src('src/js/index.js') - 匹配多个文件：
gulp.src(['src/js/index.js','src/js/detail.js']) //多个文件以数组形式传入 - 匹配所有文件：
gulp.src('src/js/*.js') - 匹配符：
- !：排除文件，
- *：匹配所有文件，
- **：匹配0个或多个子文件夹，
- {}：匹配多个属性
cnpm
因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事
cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm
npm的 --save 和 --save-dev 之间的区别
npm包管理器在安装包的时候，会有两种安装方式，一种是–save，另一种是–save-dev
共同点
- 两种方式都会安装到node_modules目录中
- 两种方式都会保存到package.json文件中
区别
- –save会存放到”dependencies”，而–save-dev会存放到”devDependencies”。
- –save是对生产环境所需依赖的声明(开发应用中使用的框架，库)比如：jq，react，vue都需要放到这里面 （npm install gulpName默认是–save）
- –save-dev是对开发环境所需依赖的声明(构建工具，测试工具) 比如：babel，webpack，都放到当前目录
使用
- npm install进行项目安装，这种默认是生产环境和开发环境都会安装
- 如果带上后缀npm install --production则只会安装生产环境的所有模块，而无视开发环境的相关模块
sass
SASS是一个成熟、稳定、强大的 CSS 扩展语言解析器，提供变量、嵌套、混合、继承等特性，大大节省了设计者的时间，使得CSS的开发变得简单和可维护
语法
-
注释
- 多行注释 /* */ (会出现在css中)
- 单行注释 // (不会出现在css中)
-
变量
sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开，可以建一个var.scss文件，存放公共变量
- 全局变量与局部变量
定义在任何选择器之外的变量被认为是全局变量，定义在选择器内的变量称之为局部变量,但启用了global后，即使写在局部也能覆盖全局变量
$color:#fff !global;
- 默认变量
sass的默认变量仅需要在值后面加上!default即可,覆盖的方式只需要在默认变量之前重新声明下变量即可
$baseLineHeight:2;
$baseLineHeight:1.5 !default;
body{
line-height: $baseLineHeight;
}
输出：
body{
line-height:2;
}
可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用
- 特殊变量
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等,则必须要以#{$variables}形式使用
$borderDirection:top !default;
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
- 多值变量
值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象
//list类型
$pd: 5px 10px 20px 30px;
//使用
.content{padding:$pd;}
.btop{border-top:nth($pd,1);}
//map类型
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
//使用
h1{map-get($headings,h1)}
- 嵌套
在嵌套中用&表示父元素选择器
- 混合器
变量可以实现简单样式的重用（如color,width等），但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，可以通过sass的混合器实现重用
sass中使用@mixin声明混合，通过@include来调用
-
无参数mixin
-
有参数mixin：参数名以$符号开始
-
多个参数mixin：多个参数以逗号分开
-
@content
@mixin max-screen($res){ @media only screen and (max-width:$res){ @content; } } @include max-screen(480px){ body{ color:red; } } 结果 @media only screen and (max-width: 480px) { body { color: red; } }
@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承
- 继承
使用选择器的继承，要使用关键词@extend
-
继承一般样式
@extend h1 -
占位选择器%
%ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; } @extend %ir;
- 函数
- 常用函数
- percentage($value)：将一个不带单位的数转换成百分比值；
- round($value)：将数值四舍五入，转换成一个最接近的整数；
- ceil($value)：将大于自己的小数转换成下一位整数；
- floor($value)：将一个数去除他的小数部分；
- abs($value)：返回一个数的绝对值；
- min($numbers…)：找出几个数值之间的最小值；
- max($numbers…)：找出几个数值之间的最大值。
- lighten( c o l o r , color, color,percent)
- darken( c o l o r , color, color,percent)， c o l o r 颜 色 值 ， color颜色值， color颜色值，percent百分比
数值可以带单位
- 自定义函数
格式：@fuction 函数名。sass变量带上$，关键字带上@，函数声明必须在使用前
$oneWidth: 10px;
$twoWidth: 40px;
@function widthFn($n){
@return $n * $twoWidth + ($n - 1) * $oneWidth;
}
.leng {
width: widthFn($n : 5);
}
- 运算
sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错, 可以带单位
- 条件判断及循环
-
@if判断
@if可一个条件单独使用，也可以和@else结合多条件使用， @else后面的if不用带上@@if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else { color: black; } -
for循环
@for $var from <start> through <end>（包含end值） @for $var from <start> to <end>（不包含en值）
- 导入
sass中导入其他sass文件，最后编译为一个css文件，优于纯css的@import
@import 'reset';
- 默认为当前scss路径
- 可以省略后缀名(scss)
- 可以省略下滑线(_)
一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值。
扫一扫
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
