• Gulp项目用例


    包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加

    github地址:

    gulpfile.js

    var gulp = require('gulp'),                         //基础库
        imagemin = require('gulp-imagemin'),            //图片压缩
        less = require('gulp-less'),                    // less
        minifycss = require('gulp-minify-css'),         //css压缩
        fileinclude  = require('gulp-file-include'),    // 文件包含
        //jshint = require('gulp-jshint'),              //js检查
        uglify  = require('gulp-uglify'),               //js压缩
        rename = require('gulp-rename'),                //重命名
        //concat  = require('gulp-concat'),             //合并文件
        //clean = require('gulp-clean'),                //清空文件夹
        notify = require('gulp-notify'),                // 信息提示
        plumber = require('gulp-plumber'),
        connect = require('gulp-connect'),              //本地开发web服务器,包括实时刷新
        rev = require('gulp-rev'),
        revCollector  = require('gulp-rev-collector'),
        revReplace = require('gulp-rev-replace'),
        minifyHTML = require('gulp-minify-html');
    
    var devDir = 'dist';
    
    /** less编译 **/
    gulp.task('less', function () {
        gulp.src('./src/less/mspei.less')
            .pipe(less())
            //.pipe(rename({ suffix: '.min' }))
            //.pipe(minifycss())
            .pipe(gulp.dest('./'+devDir+'/css/'));
    });
    
    /** js **/
    gulp.task('js', function () {
        gulp.src(['./src/js/**/*'])
            .pipe(gulp.dest('./'+devDir+'/js/'));
    });
    
    /** 通用文件包含 **/
    gulp.task('fileinclude', function() {
        gulp.src(['./src/views/**/*.html', '!./src/views/include/**.html'])
            .pipe(fileinclude({
                prefix: '@@',
                basepath: '@file'
            }))
            .pipe(gulp.dest('./'+devDir+'/'));
    });
    
    /** 图片处理 **/
    gulp.task('images', function () {
        gulp.src(['./src/images/**/*'])
            .pipe(gulp.dest('./'+devDir+'/images/'));
    });
    
    /** 字体图标 **/
    gulp.task('fonts', function () {
        gulp.src(['./src/fonts/**/*'])
            .pipe(gulp.dest('./'+devDir+'/fonts/'));
    });
    
    /** 使用connect启动一个Web服务器 **/
    gulp.task('connect', function () {
        connect.server({
            root: './'+devDir+'/',
            livereload: true
        });
    });
    
    /** 刷新页面 **/
    gulp.task('reload', function () {
        gulp.src('./'+devDir+'/**/*.html')
            .pipe(connect.reload());
    });
    
    /** 监测文件变动,设置自动执行的任务 **/
    gulp.task('watch', function () {
        gulp.watch('./src/less/**/*.less', ['less', 'reload']);                   // 当所有less文件发生改变时,调用less任务
        gulp.watch('./src/js/**/*.js', ['js', 'reload']);                   // 当所有js文件发生改变时,调用js任务
        gulp.watch('./src/views/**/*.html', ['fileinclude', 'reload']); // 当所有模板文件变化时,重新生成生成页面到根目录
        gulp.watch('./src/images/**/*', ['images']);                    // 监听images
    });
    
    /** 开发时,运行 'gulp dev' **/
    gulp.task('dev', ['connect', 'less', 'js', 'fileinclude', 'images', 'fonts', 'reload', 'watch']);
    
    
    
    /*****************************************************************
     * dist版本,压缩版
     ****************************************************************/
    /** less编译 **/
    gulp.task('lessDist', function () {
        gulp.src('./src/less/mspei.less')
            .pipe(less())
            //.pipe(rename({ suffix: '.min' }))
            .pipe(minifycss())
            .pipe(rev())
            .pipe(gulp.dest('./dist/css/'))
            .pipe(rev.manifest())
            .pipe(gulp.dest('./src/rev/css'));
    });
    
    /** js **/
    gulp.task('jsDist', function () {
        gulp.src(['./src/js/**/*', '!./src/js/**/*.js'])
            .pipe(gulp.dest('./dist/js'));
        gulp.src(['./src/js/**/*.js'])
            .pipe(uglify({
                mangle: {except: ['require', 'exports', 'module', '$']}
            }))
            .pipe(rev())
            .pipe(gulp.dest('./dist/js/'))
            .pipe(rev.manifest())
            .pipe(gulp.dest('./src/rev/js'));
    });
    
    /** 通用文件包含 **/
    gulp.task('fileincludeDist', function() {
        gulp.src(['./src/views/**/*.html', '!./src/views/include/*.html'])
            .pipe(fileinclude({
                prefix: '@@',
                basepath: '@file'
            }))
            .pipe(gulp.dest('./dist/'));
    });
    
    /** 图片处理 **/
    gulp.task('imagesDist', function () {
        gulp.src(['./src/images/**/*'])
            .pipe(gulp.dest('./dist/images/'));
    });
    
    /** 字体图标 **/
    gulp.task('fontsDist', function () {
        gulp.src(['./src/fonts/**/*'])
            .pipe(gulp.dest('./dist/fonts/'));
    });
    
    gulp.task('commonRev', function () {
        return gulp.src(['src/rev/**/*.json', 'dist/**/*.html'])
            .pipe( revCollector({
                replaceReved: true,
                dirReplacements: {
                    'css': 'css',
                    'js': 'js',
                    //'cdn/': function(manifest_value) {
                    //    return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
                    //}
                }
            }) )
            .pipe( minifyHTML({
                empty:true,
                spare:true
            }) )
            .pipe( gulp.dest('dist') );
    });
    
    
    //处理seajs脚本的模块引用
    gulp.task("seaRev", function() {
        var jsManifest = gulp.src('./src/rev/js/*.json');
    
        return gulp.src(["src/js/config.js"], {
                base: "src/js"
            })
            .pipe(revReplace({
                manifest: jsManifest
            }))
            .pipe(rev())
            .pipe(gulp.dest("dist/js"))
            .pipe(rev.manifest("rev-manifest-seajs.json", {
                merge: true
            }))
            .pipe(gulp.dest("src/rev/js"));
    });
    
    
    /** 发布时,运行 'gulp dist' **/
    /** 需版本号,再运行 'gulp rev' **/
    gulp.task('dist', ['lessDist', 'jsDist', 'fileincludeDist', 'imagesDist', 'fontsDist']);
    gulp.task('rev', ['commonRev', 'seaRev']);

    package.json

    {
      "name": "mspei_front",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-asset-rev": "^0.0.15",
        "gulp-connect": "^4.1.0",
        "gulp-file-include": "^0.13.7",
        "gulp-imagemin": "^3.0.1",
        "gulp-less": "^3.1.0",
        "gulp-livereload": "^3.8.1",
        "gulp-minify-css": "^1.2.4",
        "gulp-notify": "^2.2.0",
        "gulp-plumber": "^1.1.0",
        "gulp-rename": "^1.2.2",
        "gulp-rev": "^7.1.2",
        "gulp-rev-collector": "^1.0.5",
        "gulp-uglify": "^2.0.0",
        "gulp-rev-replace": "^0.4.3",
        "gulp-minify-html": "^1.0.6"
      },
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "nuanfeng",
      "license": "ISC"
    }
  • 相关阅读:
    [原创]Android插件化的一种实现
    [原创]HierarchyView的实现原理和Android设备无法使用HierarchyView的解决方法
    使用linux mint 安装无线网卡驱动
    Ubuntu下U盘变成只读的解决方法
    在Android源码中查找Java代码中native函数对应的C++实现
    Android Training Caching Bitmaps 翻译
    [转]获取app的内部储存路径
    [转]sudo找不到命令:修改sudo的PATH路径
    [转]CDN(内容分发网络)技术原理
    电视的应用开发注意事项[持续更新]
  • 原文地址:https://www.cnblogs.com/woodk/p/5971160.html
Copyright © 2020-2023  润新知