Geek Answers Handbook

How to add custom Gulp task and directive in Ionic Framework

I was asked to work on a fix for our Ionic project. I have to replace all pixel units with Rem blocks, but I do not want the file to be replaced with the file, instead I found this that looks like a pretty solution, but I almost don't know where I should write this task and directive

Gulp Task:

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

Directive and its extension:

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

So my question is: how to add a custom Gulp task to my ionic environment and how to add a directive and its extension.

Sorry if my question sounds too weak, but I really have not found a real way to do this.

Thanks so much for your time in advance.

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

More articles:


All Articles