gulp使用
程序员文章站
2024-03-24 17:45:46
...
入门指南
1. 全局安装 gulp：
$ npm install --global gulp
2. 作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
4. 运行 gulp：
$ gulp默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。
二. 插件的使用
1.less
var gulp =
require("gulp"),
less =
require("gulp-less");
gulp.task("less",function(){
returngulp.src("./less/*.less")//这个地址是less文件夹地址
.pipe(less())
.pipe(gulp.dest("./css/")); //这个地址是目标文件夹地址
});
2.gulpautoprefixer添加css前缀
var
gulp =require("gulp"),
autoprefixer =require("gulp-autoprefixer");
gulp.task('testAutoFx',function () {
gulp.src('src/css/index.css')//目标文件
.pipe(autoprefixer({
browsers: ['last 2 versions','Android >= 4.0'],
cascade:true,//是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true//是否去掉不必要的前缀 默认：true
}))
.pipe(gulp.dest('dist/css'));//输出目录
});
3.2、gulp-autoprefixer的browsers参数详解 （传送门）：https://github.com/ai/browserslist#queries
● last 2 versions: 主流浏览器的最新两个版本
● last 1 Chrome versions: 谷歌浏览器的最新版本
● last 2 Explorer versions: IE的最新两个版本
● last 3 Safari versions: 苹果浏览器最新三个版本
● Firefox >= 20: 火狐浏览器的版本大于或等于20
● iOS 7: IOS7版本
● Firefox ESR: 最新ESR版本的火狐
● > 5%: 全球统计有超过5%的使用率
3. gulp-cssmin
//压缩css
var
gulp =require("gulp"),
cssmin =require('gulp-cssmin');//引入cssmin
rename =require("gulp-rename");//引入rename为了重命名文件
gulp.task('mincss',function () {
gulp.src('less/*.css')//目标文件
.pipe(cssmin())
.pipe(rename({suffix:'.min'}))//重命名加的后缀
.pipe(gulp.dest('./less'));//输出地址
});
4.gulp-imagemin //图片压缩
var
gulp =require("gulp"),
imagemin =require('gulp-imagemin');
gulp.task('imagemin', ()=>
gulp.src('./img/*')//目标文件
.pipe(imagemin())
.pipe(gulp.dest('./images'))//输出地址
);
5.
gulp-uglify 压缩js
var
gulp = require("gulp"),
uglify =require('gulp-uglify'),
pump =require('pump');
gulp.task('compress',function (cb) {
pump([
gulp.src('lib/*.js'),//目标文件
uglify(),
gulp.dest('dist')//输出目录
],
cb
);
});
6.gulp-useref
var
gulp =require('gulp'),
useref =require('gulp-useref'),
gulpif =require('gulp-if'),
uglify =require('gulp-uglify'),
minifyCss =require('gulp-clean-css');
gulp.task('html',function () {
returngulp.src('app/*.html')
.pipe(useref())
.pipe(gulpif('*.js',uglify()))
.pipe(gulpif('*.css',minifyCss()))
.pipe(gulp.dest('dist'));
});
html中写
<html>
<head>
<!-- build:css css/combined.css -->
<linkhref="css/one.css"rel="stylesheet">
<linkhref="css/two.css"rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/combined.js -->
<scripttype="text/javascript"src="scripts/one.js"></script>
<scripttype="text/javascript"src="scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>
7.gulp-rev 添加版本号
gulp.task('default', ()=>
gulp.src('./css/*.css')
.pipe(rev())
.pipe(gulp.dest('./'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev'))
);
8.gulp-concat
合并多个文件
9.gulp-htmlmin
压缩html
10.gulp-rev-collector
11.gulp-filter和gulp-rev-replace联合发布压缩并替换文件，还加了哈西马前缀
vargulp =require('gulp');
varrev =require('gulp-rev');
varrevReplace =require('gulp-rev-replace');
varuseref =require('gulp-useref');
varfilter =require('gulp-filter');
varuglify =require('gulp-uglify');
varcsso =require('gulp-csso');
gulp.task("index",function() {
varjsFilter =filter("**/*.js", {restore:true});
varcssFilter =filter("**/*.css", {restore
:true});
varindexHtmlFilter =filter(["**/*","!**/index.html"],
{restore:true});
returngulp.src("./index.html")
.pipe(useref())// Concatenate with gulp-useref
.pipe(jsFilter)
.pipe(uglify())// Minify any javascript sources
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso())// Minify any CSS sources
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev())
.pipe(indexHtmlFilter.restore)
.pipe(revReplace())
.pipe(gulp.dest('public'));
});