zoukankan      html  css  js  c++  java
  • 前端工具gulp2

    var gulp  = require('gulp');
    var less  = require('gulp-less');
    var htmlmin = require('gulp-htmlmin');
    var imagemin = require('gulp-imagemin');
    var cssmin = require('gulp-cssmin');
    var rename = require('gulp-rename');
    
    //生成的路径、文件夹
    var dist = 'dist/';
    //需要监控的文件定义为一个对象
    var source = {
        less: ['src/less/*.less'],
        css:[dist+'origin/*.css'],
        images: ['src/images/*.{png,jpg,gif,ico,jpeg}'],
        html: ['src/*.html']
       
    };
    
    
    gulp.task('testCssmin',function() {
        gulp.src(source.less) //多个文件以数组形式传入
            .pipe(less())
            .pipe(gulp.dest(dist+'css/origin'))
            .pipe(cssmin())
            .pipe(rename({suffix: '.min'}))
            .pipe(gulp.dest(dist+'css/'));
    });
    
    
    gulp.task('testImagemin', function () {
        gulp.src(source.images)
            .pipe(imagemin({
                // optimizationLevel: 3, //类型: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('testHtmlmin', function () {
        var options = {
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS
        };
        gulp.src(source.html)
            .pipe(htmlmin(options))
            .pipe(gulp.dest(dist));
    });
    
    //package
    gulp.task('package', ['testImagemin','testCssmin','testHtmlmin'],function () {
       console.log('package finish ...')
    })
    
    //watch
    gulp.task('watch', function() {
        return gulp.watch([source.html,source.less,source.images], ['testImagemin','testCssmin','testHtmlmin']);
    });
    

      

    今天就贴一个我用的配置文件,gulpfile.js:  

      

    说明:

    1.gulp的一个问题是合并task,上面的package任务就合并了以下的所任务。gulp同步执行任务这块,关于这方面更深的讨论参见:

    1)http://blog.csdn.net/mrhaoxiaojun/article/details/51907132

    2)gulp顺序执行任务

  • 相关阅读:
    .net Core使用EFCore连接数据库
    前端实践项目(二)webpack生成html和外部引用
    前端实践项目(一)使用webpack进行打包编译
    消息队列的模式
    消息队列的应用场景
    .Net EasyNetQ的使用
    .Net中简单地使用RabbitMQ消息队列
    C# 虚函数virtual的使用之二
    C#之System.Object
    .Net EntityFramework(EF) CodeFirst模式
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/6346830.html
Copyright © 2011-2022 走看看