Dev Diary: Gulp recipes, gulp-newer, and gulp-replace

Found a great article, ‘Useful gulp recipes’, by Daniel Winer. I like how he set the file paths as variables. I turned it into a basic todo list for building out files for a multi-channel platform.

var basePath = {
src : '',
mdot : 'public/mdot/',
tdot : 'public/tdot/',
desktopSlots : 'public/desktop-slots/',
desktopStandard : 'public/desktop-standard/'
};
var srcAssets = {
styles : basePath.src + 'css/',
scripts : basePath.src + 'js/',
images : basePath.src + 'images/'
};
// mdot
// separate html, css, and js files
var destAssetsMdot = {
css : basePath.mdot + 'css/',
html : basePath.mdot + '',
images : basePath.mdot + 'images/',
scripts : basePath.mdot + 'js/'
};
// tdot
// separate html, css, and js files
var destAssetsTdot = {
css : basePath.tdot + 'css/',
html : basePath.tdot + '',
images : basePath.tdot + 'images/',
scripts : basePath.tdot + 'js/'
};
// desktop slots
// inline css and js within an html file
// break out html into individual slots
var destAssetsDesktopSlots = {
html : basePath.desktopSlots + '',
images : basePath.desktopSlots + 'images/'
};
// desktop default
// inline css and js within html file
var destAssetsDesktopStandard = {
html : basePath.desktopStandard + '',
images : basePath.desktopStandard + 'images/'
};

The mdot and tdot platforms have been separated for now; but I might combine them in the future. Desktop is on one platform but requires a different configuration for each — I envision.

Dan provides details on how to copy images to the destination folder. To start, install gulp-newer.

npm install gulp-newer --save-dev

Gulp-newer passes “through only those source files that are newer than corresponding destination files”. Since I have no corresponding destination files I’ll need to pass all the images. Time to uninstall gulp-newer and find a different plugin that does the job.

npm uninstall gulp-newer --save-dev

With a little research I found a way to copy images over to the build folder.

gulp.task(‘copy-images’, function() {
return gulp.src(‘images/**’)
.pipe(gulp.dest(destAssetsDesktopStandard.images));
});

After adding the two asterisks it gave me an idea. I’m going to try gulp-newer again.

npm install gulp-newer --save-dev

Then updated the task to include gulp-newer.

gulp.task(‘copy-images’, function() {
return gulp.src(srcAssets.images + '**')
.pipe(newer(destAssetsDesktopStandard.images))
.pipe(gulp.dest(destAssetsDesktopStandard.images));
});

All the images were copied over! Now to see if only new images move over. One moment while I edit an image in Sketch.

Yes! I edited a file, ran the gulp command, and it worked! Now to see if it identifies new images and moves them over. Uno momento.

Verified timestamps. Looks good!

If only it would delete images that were removed. Oh well, can’t win em all.

Accomplishments so far this adventure:

  • Minified CSS and inlined within <style></style> in the html.
  • Uglified JS and inlined within <script></script> is the html.
  • Copied images over to build folder.

During development I have been manually deleting folders. The following makes it much easier. Note: Be very careful if you’re a newbie — make sure you are in the correct directory and positive it’s the folder you want deleted. Reference this StackExchange post for more details.

rm -rf folderName

I can not use sudo due to limited admin access.


As mentioned yesterday, the next task is to convert image paths to Scene7 URLs. Here we go.

To start, I created the default variables for the path and parameters as seen below. Eventually, I will have to allow developers to add unique parameters to individual images, somehow figure out if they did, and then bypass the default settings.

var scene7 = {
scene7Path : ‘http://media.dev.com.edgesuite.net/is/image/',
scene7JPG : ‘?scl=1&amp;fmt=pjpeg&amp;qlt=25,1’,
scene7GIF : ‘?scl=1&amp;fmt=gif-alpha&quantize=adaptive,off,256’,
scene7PNG : ‘?scl=1&amp;fmt=png-alpha’
};

Going to give gulp-replace a try.

npm install gulp-replace --save-dev

The test subjects…

.first {
background-image: url(“../images/cat.jpg”);
background-image: url(“http://third.party.website.com/cat.jpg");
}
.second {
background-image: url(‘../images/dog.jpg’);
background-image: url(http://third.party.website.com/dog.jpg);
}

The goal is to ignore those that have an absolute path since they are more likely to be hosted elsewhere.

gulp.task(‘inline-code’, function(){
return gulp.src(‘index.asp’)
.pipe(inlinesource())
.pipe(replace(/\.jpg/g, scene7.jpg))
.pipe(gulp.dest(destAssetsDesktopStandard.html));
});

That worked. It replaced ‘.jpg’ with ‘?scl=1&amp;fmt=pjpeg&amp;qlt=25,1’. Now onto something more challenging.

Well, I’m getting stuck at the following function.

function regExpReplaceIMAGEType( value ) {
 return value.replace( ‘.jpg’, scene7.jpg )
.replace( ‘.png’, scene7.png )
.replace( ‘.gif’, scene7.gif );
}
var imageRegExp = ‘[(](?!.*(?:http|https)).*?(png|jpg|gif).*?[)]’;
var imageReplaceRegExp = new RegExp(imageRegExp, ‘gm’);
gulp.task(‘inline-code’, function(){
return gulp.src(‘index.asp’)
.pipe(inlinesource())
// http://www.regexr.com/3bhnn
// find all images in css file
// ignore those that have an absolute path
.pipe(replace( imageReplaceRegExp, regExpReplaceIMAGEType ))
.pipe(gulp.dest(destAssetsDesktopStandard.html));
});

Guess it will have to wait until tomorrow. :(

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.