码迷,mamicode.com
首页 > Web开发 > 详细

我的gulp.js清单

时间:2017-06-27 19:51:17      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:本地   progress   bug   pre   cto   log   server   root   主目录   

var gulp = require(‘gulp‘),
        cssmin = require(‘gulp-clean-css‘), //压缩css文件
        concat = require(‘gulp-concat‘), //合并js文件
        jsmin = require(‘gulp-uglify‘), //压缩js文件
        imgmin = require(‘gulp-imagemin‘), //图片压缩
        rename = require(‘gulp-rename‘), //文件重命名
        jshint = require(‘gulp-jshint‘), //js文件检查
        rev = require(‘gulp-rev‘), //- 对文件名加MD5后缀
        revCollector = require(‘gulp-rev-collector‘), //路径替换
        connect = require(‘gulp-connect‘); //配置本地服务器

//#########文件监听及自动刷新网页start#################
gulp.task(‘connect‘, function () {
    connect.server({
        host: ‘localhost‘, //地址,可不写,不写的话,默认localhost
        port: 3000, //端口号,可不写,默认8000
        root: ‘./‘, //当前项目主目录
        livereload: true //自动刷新
    });
});

gulp.task(‘html‘, function () {
    gulp.src(‘./bill/*.html‘)
            .pipe(connect.reload());
});

gulp.task(‘watch‘, function () {
    gulp.watch(‘./bill/css/*.css‘, [‘html‘]); //监控css文件
    gulp.watch(‘./bill/js/*.js‘, [‘html‘]); //监控js文件
    gulp.watch([‘./bill/*.html‘], [‘html‘]); //监控html文件
});

gulp.task(‘server‘, [‘connect‘, ‘watch‘]);

//#########文件监听及自动刷新网页end #################

gulp.task(‘Cssmin‘, function () {
    gulp.src("bill/css/common.css")
            .pipe(rename({suffix: ‘.min‘}))
            .pipe(cssmin({dubug: true}, function (details) {
                console.log(details);
                console.log(details.name + ‘(originalSize): ‘ + details.stats.originalSize);
                console.log(details.name + ‘(minifiedSize): ‘ + details.stats.minifiedSize);
            }))
            .pipe(rev())
            .pipe(gulp.dest("bill/css"))
            .pipe(rev.manifest()) //- 生成一个rev-manifest.json
            .pipe(gulp.dest(‘bill/css‘));
});

gulp.task(‘Jsmin‘, function () {
    gulp.src("bill/js/common.js")
            .pipe(rename({suffix: ‘.min‘}))
            .pipe(jsmin())
            .pipe(rev())
            .pipe(gulp.dest("bill/js"))
            .pipe(rev.manifest()) //- 生成一个rev-manifest.json
            .pipe(gulp.dest(‘bill/js‘));
});

gulp.task(‘Imgmin‘, function () {
    gulp.src("src/img/*.jpg")
            .pipe(imgmin({
                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/img"));
});

gulp.task(‘rev‘, function () {
    gulp.src([‘./bill/**/*.json‘, "./bill/index.html"])//- 读取 rev-manifest.json 文件以及需要进行替换的文件
            .pipe(revCollector(
                    {
                        replaceReved: true,
                        dirReplacements: {
                            ‘css‘: ‘css‘,
                            ‘js‘: ‘js‘
                        }
                    }
            ))//- 执行文件名的替
            .pipe(gulp.dest(‘./bill‘)); //- 替换后的文件输出的目录
});

//执行配置任务
gulp.task(‘default‘, [‘Cssmin‘, ‘Jsmin‘, "rev"], function () {
    // gulp.start(‘testJsmin‘);
});

  

我的gulp.js清单

标签:本地   progress   bug   pre   cto   log   server   root   主目录   

原文地址:http://www.cnblogs.com/wujindong/p/7086478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!