zoukankan      html  css  js  c++  java

  • 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相关的所有常用插件，下一篇文章将会基于第一篇的基础介绍和这一篇的插件介绍，从零开始构建自己的项目配置
  • 相关阅读:
    MVC的各个部分都有那些技术来实现?如何实现?
    JRE、JDK、JVM 及 JIT 之间有什么不同
    什么是竞态条件？举例说明
    【Spring】No converter found for return value of type: class java.util.ArrayList
    【Spring】org.springframework.web.context.ContextLoaderListen 报错
    【Spring】The matching wildcard is strict……
    【MySQL】目录、文件权限问题
    线程和锁
    【Git】Found a swap file by the name ".git/.MERGE_MSG.swp"
    【Maven】Mac 使用 zsh 后 mvn 命令就无效
  • 原文地址：https://www.cnblogs.com/yesyes/p/15375786.html
Copyright © 2011-2022 走看看