gulp学习

[bai3]

gulp学习

先贴代码

var gulp = require('gulp');
var fileinclude = require('gulp-file-include')
var del = require('del');
var copy = require('copy');
var htmlmin = require('gulp-htmlmin');
var autoprefixer = require('gulp-autoprefixer');
var cleancss = require('gulp-clean-css');
var gulpSequence = require('gulp-sequence');

// 压缩图片
var imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    //确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev]
    cache = require('gulp-cache');

gulp.task('del', () => {
  console.log("开始清理dist文件夹")
  return del(['dist/*!.git'], function(){
    console.log("清理完毕")
  })
 
});

/**
 * PC端部分配置
 */
gulp.task('first-page-html', function() {
  console.log('开始压缩首页的html');
  let options = {
    removeComments: true, // 清除html注释
    collapseWhitespace: true, // 去除html空格
    removeEmptyAttributes: true, //删除所有空格作属性值
    minifyCSS: true, // 压缩页面css
    minifyJS: true, //压缩页面js，好像失败了
  }
  return gulp.src(['*.html'])
    .pipe(htmlmin(options))
    .pipe(gulp.dest('dist'));
})

gulp.task('first-page-css', function() {
  console.log('开始压缩首页的css')
  return gulp.src(['*.css'])
    .pipe(autoprefixer({
      browsers: ['last 10 versions'],
      cascade: false
    }))
    .pipe(cleancss())
    .pipe(gulp.dest('dist/'));
})


gulp.task('cssmin-pc', function() {
  console.log("开始压缩PC端css")
  return gulp.src(['pages/**/*.css'])
    .pipe(autoprefixer({
      browsers: ['last 10 versions'],
      cascade: false
    }))
    .pipe(cleancss())
    .pipe(gulp.dest('dist/pages'));
   
})

// 执行模板和html和压缩任务
gulp.task('template-pc', function() {
  console.log('开始执行PC端模板');
  return gulp.src(['pages/**/*.html'])
      .pipe(fileinclude({
          prefix: '@@',
          basepath: '@file'
      }))
      .pipe(gulp.dest('src-pc'));
      
})
gulp.task('htmlmin-pc', function() {
    console.log('开始进行PC端html压缩');
    let options = {
      removeComments: true, // 清除html注释
      collapseWhitespace: true, // 去除html空格
      removeEmptyAttributes: true, //删除所有空格作属性值
      minifyCSS: true, // 压缩页面css
      minifyJS: true, //压缩页面js，好像失败了
    }
    return gulp.src(['src-pc/**/*.html'])
      .pipe(htmlmin(options))
      .pipe(gulp.dest('dist/pages'));
})

gulp.task('del-pc', () => {
  console.log("开始清理pc临时模板文件")
  return del(['src-pc'])
});

/**
 * 移动端部分配置
 */
// 移动端压缩css
gulp.task('cssmin-h5', function() {
  console.log("开始压缩移动端端css")
  return gulp.src(['m/css/*.css'])
    .pipe(autoprefixer({
      browsers: ['last 10 versions'],
      cascade: false
    }))
    .pipe(cleancss())
    .pipe(gulp.dest('dist/m/css'));
})

gulp.task('template-h5', function() {
  console.log('开始执行移动端模板工作');
  return gulp.src(['m/**/*.html'])
      .pipe(fileinclude({
          prefix: '@@',
          basepath: '@file'
      }))
      .pipe(gulp.dest('src-h5'));
      
})

gulp.task('htmlmin-h5', function() {
  console.log('开始进行移动端html压缩');
  let options = {
    removeComments: true, // 清除html注释
    collapseWhitespace: true, // 去除html空格
    removeEmptyAttributes: true, //删除所有空格作属性值
    minifyCSS: true, // 压缩页面css
    minifyJS: true, //压缩页面js，好像失败了
  }
  return gulp.src(['src-h5/**/*.html'])
    .pipe(htmlmin(options))
    .pipe(gulp.dest('dist/m'));
})

gulp.task('del-h5', () => {
  console.log("开始清理H5临时模板文件")
  return del(['src-h5'])
});

// 压缩图片
gulp.task('testImagemin', function () {
  console.log('压缩pc端图片');
  gulp.src('images/*.{png,jpg,gif,ico,svg}')
      .pipe(cache(imagemin({
          progressive: true,
          svgoPlugins: [{removeViewBox: false}],
          use: [pngquant()]
      })))
      .pipe(gulp.dest('dist/images'));
});
gulp.task('testImageminh5', function () {
  console.log('压缩移动端图片')
  gulp.src('m/images/*.{png,jpg,gif,ico,svg}')
      .pipe(cache(imagemin({
          progressive: true,
          svgoPlugins: [{removeViewBox: false}],
          use: [pngquant()]
      })))
      .pipe(gulp.dest('dist/m/images'));
});

gulp.task('copy', () => {
  // 复制一级目录下的所有文件
  console.log("开始复制一级目录下的所有文件")
  copy(['*','.gitignore'],'dist',() => console.log("一级目录下的所有文件复制完成"));
  copy(['pages/help/**/*'],'dist/pages/help/', () => console.log("help文件夹资料拷贝"))
  copy('m/lib/**','dist/m/lib', () => console.log('移动端lib文件拷贝'));
  copy('m/js/**','dist/m/js', () => console.log('移动端js插件拷贝'));
  copy('v2/**/*','dist/v2',() => console.log('v2文件夹复制完毕'));
  copy('pc/**/*','dist/pc',() => console.log('pc文件夹复制完毕'))
});
// 打包和测试的任务队列
gulp.task('build-quence', gulpSequence('del-pc','del','copy',['first-page-html','first-page-css'],'template-pc','htmlmin-pc','cssmin-pc','del-pc','template-h5','htmlmin-h5','cssmin-h5','del-h5','testImagemin','testImageminh5'))
gulp.task('test-quence-pc',function(cb){
  gulpSequence('template-pc','htmlmin-pc')(cb)
})
// 默认任务
gulp.task('build', () => {
  console.log('打包到dist文件夹')
  gulp.start('build-quence')
})
gulp.task('watch', ()=> {
  console.log('启动热更新，用于实时测试')
  gulp.watch("pages/**/*.html",["test-quence-pc"])
  gulp.watch("pages/**/*.css",["cssmin-pc"])
})
// 完美没毛病

学习目的

为公司官网PC端和移动端引入打包工具，压缩代码图片以及进行模板解耦

学习过程

主要学习gulp基本知识和基本使用以及相关插件的使用

用到的插件

• fileinclude html模板插件（在html上运用类似后端的模板引擎）

  gulp.task('template-pc', function() {
    console.log('开始执行PC端模板');
    return gulp.src(['pages/**/*.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('src-pc'));
        
  })

• del 插件用于删除文件和文件夹

• copy插件用于复制文件和文件夹

• htmlmin 插件用于压缩的html以及html内部的css和js

• autoprefixer 插件用于css自动添加浏览器头部

• cleancss 插件用于压缩css

• imagemin 插件用于压缩图片

• gulpSquence插件用于创建任务队列

遇到的问题以及解决

• htmlmin插件存在一个小问题，设置minifyJs：true还是没能压缩html内的js代码，略坑
• 因为gulp的任务是异步执行的，如果两个任务存在顺序执行关系，就容易导致错误，所以引入gulp-sequence插件解决任务队列问题
• gulp文件匹配都采用类似正则匹配规则，不是很熟悉。

最后

不断优化打包工具，先后引入了图片压缩插件，大概一张200kb图片能减少十几k的样子，还创建一个单的的任务队列，用于在写代码的时候，监听代码变化实时进行模板合并，可以实时预览效果。具体的插件使用参考上面贴的代码。注意下打包前打包后相关文件夹路径问题，以及文件匹配规则问题。gulp总的来说比较简单，但是效率不是很高，目前的项目一般不会采用。。。，还是继续当个webpack配置工程师。。。。

[bai3]

添加注释，gulp还可以启动一个本地服务器用于实时预览效果，但是我采用了vscode的Easy LESS 和 Live Server以及启动一个wacth监听就可以完美的实时预览效果了。