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

Question

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

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'));
});