当前位置 : 主页 > 网络编程 > JavaScript >

gulpfile.js配置

来源:互联网 收集:自由互联 发布时间:2021-06-30
gulpfile.js var gulp = require('gulp')var gutil = require('gulp-util')var uglify = require('gulp-uglify')var minifyCss = require('gulp-minify-css')var combiner = require('stream-combiner2')var rename = require('gulp-rename')var concat = req
gulpfile.js
var gulp = require('gulp')
var gutil = require('gulp-util')
var uglify = require('gulp-uglify')
var minifyCss = require('gulp-minify-css')
var combiner = require('stream-combiner2')
var rename = require('gulp-rename')
var concat = require('gulp-concat') // 合并文件 --合并只是放一起--压缩才会真正合并相同样式
var imagemin = require('gulp-imagemin')
var htmlmin = require('gulp-htmlmin') //html压缩组件
var removeEmptyLines = require('gulp-remove-empty-lines'); //清除空白行,参考:https://www.npmjs.com/package/gulp-remove-empty-lines



/*
gulp——本地gulp
gulp-imagemin——图片压缩
gulp-rename----给文件重新命名
gulp-minify-css ——css压缩
gulp-uglify ——js压缩
gulp-util ——控制台代码着色
gulp-watch-path ——文件很多时编辑那个哪个压缩,不会全部压缩(获取改变的文件的src和dest路径)
stream-combiner2——有些 gulp 任务编译出错会终止 gulp.watch,使用 gulp-watch-path 配合stream-combiner2 可避免这种情况
*/

/* 定义错误打印的方法 */
var handleError = function(err) {
  var colors = gutil.colors
  console.log('\n')
  gutil.log(colors.red('Error!'))
  gutil.log('fileName: ' + colors.red(err.fileName))
  gutil.log('lineNumber: ' + colors.red(err.lineNumber))
  gutil.log('message: ' + err.message)
  gutil.log('plugin: ' + colors.yellow(err.plugin))
}

gulp.task('script', function() { // script时自定义的
  // 将文件的源路径和发布路径赋值给相应变量
  var srcJsPath = 'static/js/*.js'
  var destJsPath = 'dist/js/'
  var combined = combiner.obj([
    gulp.src(srcJsPath), // 获取文件源地址
    concat('bundle.min.js'),
    uglify(), // 执行压缩
    // rename({suffix: '.min'}),
    gulp.dest(destJsPath) // 将压缩的文件发布到新路径
  ])
  combined.on('error', handleError) // 打印错误日志
})

// minifyCss

gulp.task('css', function() { //
  // 将文件的源路径和发布路径赋值给相应变量
  var srcCssPath = 'static/css/*.css'
  var destCssPath = 'dist/css/'
  var combined = combiner.obj([
    // gulp.src(srcCssPath), // 获取文件源地址
    gulp.src([
      './static/css/style.css',
      './static/css/core.css'
    ]),
    minifyCss(), // 执行压缩
    rename({
      suffix: '.min'
    }),
    gulp.dest(destCssPath) // 将压缩的文件发布到新路径
  ])
  combined.on('error', handleError) // 打印错误日志
})

// 图片文件
gulp.task('images', function() {
  var destImagesPath = 'dist/images/'
  gulp.src('./static/images/*.{png,jpg,gif,ico}')
    .pipe(imagemin({
      optimizationLevel: 5, // 类型:Number  默认:3  取值范围:0-7(优化等级)
      progressive: true, // 类型:Boolean 默认:false 无损压缩jpg图片
      interlaced: true, // 类型:Boolean 默认:false 隔行扫描gif进行渲染
      multipass: true // 类型:Boolean 默认:false 多次优化svg直到完全优化
    }))
    .pipe(gulp.dest(destImagesPath))
})

// base64

var base64 = require('gulp-base64')
gulp.task('buildCss', function() {
  return gulp.src([
      './static/css/style.css',
      './static/css/core.css'
    ]).pipe(base64({
      baseDir: '', // 样式文件里面相对的目录
      extensions: ['svg', 'png', /\.jpg#datauri$/i],
      exclude: [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
      maxImageSize: 5 * 1024, // bytes
      debug: true
    }))
    .pipe(concat('bundle.min.css'))
    .pipe(gulp.dest('./dist/css'))
})

// 删除对应的文件夹
var del = require('del')
gulp.task('clean', function(cb) {
  del([
    // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
    'dist/*',
    // 我们不希望删掉这个文件,所以我们取反这个匹配模式
    '!dist/deploy.json'
  ], cb)
})



//html压缩
gulp.task('html', function() {
  var destPath = 'dist/'
  var options = {
    removeComments: true, //清除HTML注释
    collapseWhitespace: false, //压缩HTML
    collapseBooleanAttributes: true, //省略布尔属性的值  ==> 
    removeEmptyAttributes: true, //删除所有空格作属性值  ==> 
    removeScriptTypeAttributes: true, //删除
网友评论