zoukankan      html  css  js  c++  java
  • gulp配置备份

    // 引入 gulp
    var gulp = require('gulp'); 
    
    // 引入组件
    var clean = require('gulp-clean'); //- 清除
    var sass = require('gulp-sass'); //- sass编译
    var concat = require('gulp-concat'); //- 合并
    var uglify = require('gulp-uglify'); //- 压缩JS
    var minify = require('gulp-minify-css'); //- 压缩CSS
    var rev = require('gulp-rev'); //- 对文件名加MD5后缀
    var revCollector = require('gulp-rev-collector'); //- 路径替换
    var compass = require('gulp-compass'); //compass
    var cssSpriter = require('gulp-css-spriter'); //CSS雪碧图
    var tinypng = require('gulp-tinypng'); //tinypng图片压缩
    
    //清除资源
    gulp.task('clean',function(){
        gulp.src(['./js/*.js'],['./css/*.css'],{read:false})
            .pipe(clean())
    })
    
    //编译Sass
    gulp.task('sass',['clean'], function() {
        gulp.src('./sass/*.scss')
            .pipe(sass())
            .pipe(minify())
            .pipe(gulp.dest('./css'));
    });
    
    //compass
    gulp.task('compass', function() {
      var timestamp = +new Date();
      gulp.src('./sass/*.scss')
        .pipe(compass({
          config_file: './config.rb',
          css: 'css',
          sass: 'sass'
        }))
        .pipe(cssSpriter({
            // 生成的spriter的位置
            spriteSheet: './dist/images/sprite'+timestamp+'.png',
            // 生成样式文件图片引用地址的路径
            // 如下将生产:backgound:url(../images/sprite20324232.png)
            pathToSpriteSheetFromCSS: '../images/sprite'+timestamp+'.png'
        }))
        .pipe(gulp.dest('./css'));
    });
    
    // 合并,压缩文件
    gulp.task('concat', function() {
        gulp.src('./js/*.js')
            .pipe(concat('all.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./js'));
            // .pipe(rev.manifest());
            // .pipe(gulp.dest('./rev'));   
    });
    //给链接添加版本号,清除缓存
    // gulp.task('rev', function() {
    //     gulp.src(['./rev/*.json', './application/**/header.php'])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
    //         .pipe(revCollector())                                   //- 执行文件内css名的替换
    //         .pipe(gulp.dest('./application/'));                     //- 替换后的文件输出的目录
    // });
    //图片压缩
    gulp.task('tinypng', function () {
        gulp.src('./images/*')
            //https://tinypng.com/developers 获取API_KEY
            //https://tinypng.com/developers/subscription 一个月免费500张图片
            .pipe(tinypng('P3A2Pul7IHVFIFpJfJ6kMNhOlS6KbgfW'))
            .pipe(gulp.dest('./dist/images'));
    });
    
    // 默认任务
    gulp.task('default', function(){
        gulp.watch(['./js/*.js','./sass/*.scss'], ['concat','compass']);
    });
  • 相关阅读:
    纯CSS实现垂直居中的几种方法
    用定位实现机器人效果
    Java 集合 HashMap & HashSet 拾遗
    Java 集合 持有引用 & WeakHashMap
    Java 泛型 通配符类型
    多线程threading 的使用
    mysql 数据库的设计三范式
    python 排序算法
    Python 中的单例模式
    mysql 数据库引擎
  • 原文地址:https://www.cnblogs.com/xiaojiu9/p/5105000.html
Copyright © 2011-2022 走看看