Gulp系列文章-常用插件

JS相关插件

concat合并文件

var gulp = require('gulp')
var concat = require('gulp-concat')
gulp.task('testConcat', function() {
  gulp.src('src/js/*.js')
    .pipe(concat('all.js'))//合并后的文件名
    .pipe(gulp.dest('dist/js'));
})

uglify压缩JS文件

var gulp = require('gulp'),
  uglify= require('gulp-uglify');
gulp.task('testUglify', function () {
  //压缩src/js目录下的所有js文件
  gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

requirejs打包模块化的js文件

var gulp = require('gulp'),
  requirejs = require('gulp-requirejs');
gulp.task('script',function(){
  //将js模块打包成一个文件
  return requirejs({
    baseUrl: 'src/js',
    paths:{
      'jquery':'jquery.min'
    },
    out:'main.js',
    name: 'main',       
    exclude: ['jquery']
  })
  .pipe(gulp.dest('dist/js')); 
})

jshint代码规则检测

var gulp = require('gulp'),
  jshint = require('gulp-jshint');
gulp.task('script',function(){
  gulp.src('src/js/*.js')
  //设置js检测规则，并检测js代码
  .pipe(jshint('.jshintrc'))
  //对代码进行报错提示
  .pipe(jshint.reporter('default'));
});

CSS相关插件

clean-css压缩css文件

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('css', function() {
　gulp.src('src/css/*.css')
    .pipe(cleanCSS({compatibility: 'ie9'}))
    .pipe(gulp.dest('dist/css'));
});

concat合并文件

var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('css', function() {
  gulp.src('src/css/*.css')
    .pipe(concat('all.css'))
    .pipe(gulp.dest('dist/css'));
});

sass编译

node-sass建议用cnpm安装（淘宝npm源）

cnpm i node-sass gulp-sass -D

var gulp = require('gulp'),
  sass = require('gulp-sass');

gulp.task('sass',function(){
　gulp.src('src/css/sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css')); 
})

autoprefixer根据设置浏览器版本自动处理浏览器前缀

var gulp = require('gulp'),
  autoprefixer = require('gulp-autoprefixer');
gulp.task('css',function(){
　gulp.src('src/css/*.css')
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'Android >= 4.0'],
    }))
    .pipe(gulp.dest('dist/css'))
});

gulp-autoprefixer的browsers参数

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%的使用率

csslint检测CSS代码

var gulp = require('gulp'),
  csslint = require('gulp-csslint');
gulp.task('css',function(){
  gulp.src('src/css/*.css')
  //设置css检测规则，并检测css代码
  .pipe(csslint('.csslintrc'))
  //对代码进行报错提示
  .pipe(csslint.formatter())
});

HTML相关插件

htmlmin压缩html

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
gulp.task('testHtmlmin', function () {
  var options = {
    removeComments: true,//清除HTML注释
    collapseWhitespace: true,//压缩HTML
    minifyJS: true,//压缩页面JS
    minifyCSS: true//压缩页面CSS
  };
  gulp.src('src/html/*.html')
    .pipe(htmlmin(options))
    .pipe(gulp.dest('dist/html'));
});

gulp-wrap模板文件

gulp-wrap可以实现模板的功能，比如把网页中重用的部分，提取成一个单独的布局文件

var gulp = require('gulp');
var wrap = require('gulp-wrap');
gulp.task('wrap', function () {
  gulp.src("pages/*.html")
    .pipe(wrap({src:'layout/default.html'}))
    .pipe(gulp.dest("./dist"));
});

layoyt目录下有一个default.html，内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  
  <title>wrap</title>
</head>
<body>
  <header>header</header>
  <%= contents %>
  <footer>footer</footer>
</body>
</html>

pages目录下有a.html和b.html两个文件，内容如下

<div class="item">a.html</div>

<div class="item">b.html</div>

执行gulp任务后，dist目录下生成a.html和b.html，内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  
  <title>wrap</title>
</head>
<body>
  <header>header</header>
  <div class="item">a.html</div>
  <footer>footer</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  
  <title>wrap</title>
</head>
<body>
  <header>header</header>
  <div class="item">b.html</div>
  <footer>footer</footer>
</body>
</html>

图片相关插件

imagemin压缩图片文件

var gulp = require('gulp'),
  imagemin = require('gulp-imagemin');
gulp.task('image', function () {
  gulp.src('src/img/*.{png,jpg,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

spritesmith制作雪碧图

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
gulp.task('image', function() {
  return gulp.src('src/img/*')
    .pipe(spritesmith({
      'imgName':'sprite.png',
      'cssName':'sprite.css',
      'padding':5 //合并时两张图片的距离
    }))
    .pipe(gulp.dest('dist/img'));
});

注意： 该插件使用方式是gulp.spritesmith，而不是gulp-spritesmith

文件相关插件

rename重命名

var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('file', function() {
  gulp.src('src/css/*.css')
    .pipe(rename(function(path) {
      path.basename += "-min";
      path.extname = ".scss"
    }))
    .pipe(gulp.dest('dist/css'));
});

src/css目录下有a.css和b.css，执行任务后，dist/css目录下生成a-min.scss和b-min.scss

clean删除文件

var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('file', function () {
  return gulp.src('dist/img/*')
    .pipe(clean());
});

注意： 由于gulp任务是异步执行的，如果希望执行删除任务后再执行其他任务，应该向下面这样做

gulp.task('default', ['clean'], function(){
    // 执行其他编译任务
    gulp.start('less', 'images', 'js', 'watch');
});

zip压缩

var gulp = require('gulp');
var zip = require('gulp-zip');
gulp.task('file', function() {
  gulp.src('dist/**/*')
    .pipe(zip('project.zip'))
    .pipe(gulp.dest('out'));
});

把dist目录下的文件打包成project.zip，编译到out目录下

hash相关插件

useref脚本或样式表替换

var gulp = require('gulp');
var useref = require('gulp-useref');
gulp.task('file', function() {
  gulp.src('*.html')
    .pipe(useref())
    .pipe(gulp.dest('dist'));
});

替换前

<!-- build:css style.min.css -->
<link rel="stylesheet" href="src/css/style.css">
<!-- endbuild -->

替换后

<link rel="stylesheet" href="style.min.css">

rev给文件名添加hash值

// a.css -> a-d41d8cd98f.css
var gulp = require('gulp');
var rev = require('gulp-rev');
gulp.task('file', function() {
  gulp.src('src/css/*')
    .pipe(rev())
    .pipe(gulp.dest('dist'));
});

rev-repalce替换被gulp-rev重命名的文件名

这个插件常于gulp-useref和gulp-rev一起使用

var gulp = require('gulp');
var rev = require('gulp-rev');
var useref = require('gulp-useref');
var revReplace = require('gulp-rev-replace');
gulp.task('file', function() {
  gulp.src('*.html')
    .pipe(useref()) // 替换
    .pipe(rev()) // 加hash
    .pipe(revReplace()) // 替换hash
    .pipe(gulp.dest('dist'));
});

重写前的index.html

<!-- build:css style.min.css -->
<link rel="stylesheet" href="src/css/style.css">
<!-- endbuild -->

重写后的index-d41d8cd98f.html

<link rel="stylesheet" href="style-d41d8cd98f.min.css">

其他插件

connect生成一个服务器

var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('connect', function() {
  connect.server();
});

babel将ES6代码编译成ES5

npm i babel@7 babel-core babel-preset-es2015 babel-preset-es2016 babel-preset-es2017 -D

var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6', function(){
  return gulp.src('src/js/*.js')
    .pipe(babel({
      presets: ["babel-preset-es2015", "babel-preset-es2016", "babel-preset-es2017"].map(require.resolve)
    }))
    .pipe(gulp.dest('dist/js'));
});

browser-sync页面自动刷新

npm install -g browser-sync

gulp.task('browser-sync', ['css','wrap'], function () {
  browserSync({server: {baseDir: 'dist'}})
});

在CSS任务的最后添加如下代码

.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({ stream: true }));

在HTML模板拼接任务的最后添加如下代码

.pipe(gulp.dest("dist/pages"))
.pipe(browserSync.reload({ stream: true }));

结语

以上基本囊括了gulp相关的所有常用插件，下一篇文章将会基于第一篇的基础介绍和这一篇的插件介绍，从零开始构建自己的项目配置

posted @ 2021-10-07 13:59 wmui 阅读(36) 评论(0) 编辑收藏举报

刷新页面返回顶部

wmui

Gulp系列文章-常用插件

JS相关插件

concat合并文件

uglify压缩JS文件

requirejs打包模块化的js文件

jshint代码规则检测

CSS相关插件

clean-css压缩css文件

concat合并文件

sass编译

autoprefixer根据设置浏览器版本自动处理浏览器前缀

csslint检测CSS代码

HTML相关插件

htmlmin压缩html

gulp-wrap模板文件

图片相关插件

imagemin压缩图片文件

spritesmith制作雪碧图

文件相关插件

rename重命名

clean删除文件

zip压缩

hash相关插件

useref脚本或样式表替换

rev给文件名添加hash值

rev-repalce替换被gulp-rev重命名的文件名

其他插件

connect生成一个服务器

babel将ES6代码编译成ES5

browser-sync页面自动刷新

结语

公告