zoukankan      html  css  js  c++  java
  • gulp的常用插件

    gulp和webpack的差别:https://www.cnblogs.com/lovesong/p/6413546.html

    var gulp = require('gulp');
    var del = require('del');
    // 常用插件
    // 压缩javascript文件,减小文件大小
    var uglify = require('gulp-uglify');
    // 文件重命名
    var rename = require('gulp-rename');
    // 压缩css
    var cssmin = require('gulp-cssmin');
    // 合并javascript文件,减少网络请求
    var concat = require('gulp-concat');
    //解析sass文件
    var sass = require("gulp-sass");
    // 压缩图片
    var imagemin = require("gulp-imagemin");
    // 压缩html
    var htmlmin = require('gulp-htmlmin');
    // babel es6转化为es5
    var babel = require("gulp-babel"); // 用于ES6转化ES5
    //开启服务器
    var connect = require('gulp-connect');
    gulp.task('server', ['default', 'watch'], function() {
        connect.server({
            root: 'dist',
            port: 8080,
            livereload: true
        })
    })
    gulp.task('watch', function () {
    //监听文件变化
    gulp.watch('blog/*.html', ['htmlmin']);
     
    gulp.watch('blog/**/*.js', ['uglify']);
    });
    //var livereload = require('gulp-livereload');
    gulp.task('default',['cssmin', 'imagemin', 'uglify', 'htmlmin'], function() {
    console.log('正确执行该任务')
    });
    //es6转es5
    gulp.task('es6', function() {
        return gulp.src('blog/es6.js')
        .pipe(babel())
        .pipe(gulp.dest('build'))
         .pipe(connect.reload())
    })
    //压缩css文件
    gulp.task('cssmin', function() {
    console.log('正确执行css压缩任务')
        return gulp.src('blog/**/*.css')
        .pipe(cssmin())
    //  .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('dist'));
    });
    //重命名
    gulp.task('uglify', function() {
        return gulp.src("blog/**/*.js")
        .pipe(uglify())
    //  .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('dist'))
    })
    //压缩图片
    gulp.task('imagemin', function(){
        return gulp.src('blog/images/*')
            .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('dist/images'))
    });


    gulp.task('htmlmin', function () {
    var options = {
    removeComments: true,//清除HTML注释
    collapseWhitespace: true,//压缩HTML
    minifyJS: true,//压缩页面JS
    minifyCSS: true//压缩页面CSS
    };
    return gulp.src('blog/*.html')
    .pipe(htmlmin(options))
    .pipe(gulp.dest('dist/'))
    .pipe(connect.reload())
    });
    gulp.task('clean', function(){
        del([
            'dist'
        ])
    })
    //var watch = gulp.watch('app/index.html', ["minify"]);
    //watch.on('change', function(event) {
    //  console.log('File' + event.path)
    //})
  • 相关阅读:
    jquery使用--常见前端效果实现
    Quartz —— Spring 环境下的使用
    java设计模式--外观模式(Facade)
    java设计模式--装饰模式(Decorator)
    Java开发中的23种设计模式详解(转)
    java设计模式--工厂模式
    选择排序
    序列化
    解析器
    版本控制
  • 原文地址:https://www.cnblogs.com/yunshangwuyou/p/9272524.html
Copyright © 2011-2022 走看看