How to add a custom Gulp Task and a Directive in Ionic Framework

I've been asked to work on a fix for our Ionic Project. I have to replace all pixel units with Rem units but I didn't want to go file by file to replace them, instead I found this wich looks like quite a solution but I have almost no idea 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 that's my question: How do you add a custom Gulp task to your Ionic Enviroment and how to add a directive and its extension.

I'm sorry if my question sounds too lame but I really haven't found an actual way how to do it

Many thanks for your time in advance

1 Answers

Answers 1

I am addressing the root issue of your problem i.e. you need to change the PX to rem so this can be done using the gulp-pxtorem , and at the time of building the application you can add this task and as these changes will be in css only so no need to be using of the Directive.

Sample Task

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

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati