Question

我被要求为我们的离子项目修复工作。我必须用Rem单位替换所有像素单位，但我不想逐个文件来替换它们，而I found this看起来像是一个很好的解决方案，但我几乎不知道我应该在哪里写这个任务和指令

Gulp任务：

gulp.task('build:rem', ['build:sass'], function() {
    function replaceWith(match, p1, offset, string) {
        return p1 / 16 + 'rem';
    }

    return gulp.src('./www/index.html')
        .pipe(assets({js: false, css: true}))
        .pipe(tap(function(file) {
            file.contents = new Buffer(file.contents.toString().replace(/([\d.]+)\s*px/g, replaceWith));
        }))
        .pipe(gulp.dest('./www'));
});

指令及其扩展名：

(function() {
    'use strict';
    angular.module('App.core')
    .directive('style', StyleDirective);

    StyleDirective.$inject = ['$timeout'];

    function StyleDirective($timeout) {
    function pxToRem(el, at) {
        if (el.attr('style')) {
        at.$set('style', el.attr('style').replace(/([\d.]+)\s*px/g, function(match, p1, offset, value) {
            return p1 / 16 + 'rem';
        }));
        }
    }

    return {
        restrict: 'A',
        compile: function(element, attr) {
            pxToRem(element, attr);
        }
    };
    }
})();

(function() {
    'use strict';
    angular.module('App.core')
    .directive('collectionRepeat', CollectionRepeatDirective);

    CollectionRepeatDirective.$inject = ['$timeout'];

    function CollectionRepeatDirective($timeout) {
    function pxToRem(el, at) {
        if (el.attr('style')) {
            $timeout(function() {
                at.$set('style', el.attr('style').replace(/([\d.]+)\s*px/g, function(match, p1, offset, value) {
                    return p1 / 16 + 'rem';
                }));
            });
        }
    }

    return {
        restrict: 'A',
        multielement: true,
        link: {
            post: function(scope, element, attr) {
                pxToRem(element, attr);
            }
        }
    };
    }
})();

这就是我的问题：如何向Ionic Enviroment添加自定义Gulp任务以及如何添加指令及其扩展名。

对不起，如果我的问题听起来太蹩脚，但我真的还没找到实际的方法呢

非常感谢您提前的时间

Answer 1

我正在解决您的问题的根本问题，即您需要将PX更改为rem，以便可以使用gulp-pxtorem完成此操作，并在构建应用程序时您可以添加此任务，因为这些更改仅在css中，因此无需使用指令。

示例任务

var pxtorem = require('gulp-pxtorem');

gulp.task('css', function() {
    gulp.src('css/**/*.css')
        .pipe(pxtorem())
        .pipe(gulp.dest('css'));
});

如何在Ionic Framework中添加自定义Gulp任务和指令

1 个答案: