Skip to content

Instantly share code, notes, and snippets.

@hellonicolas

hellonicolas/gulpfile.js

Last active March 10, 2018 11:30
Show Gist options
  • Save hellonicolas/07817fe3d467b33c237b to your computer and use it in GitHub Desktop.
Save hellonicolas/07817fe3d467b33c237b to your computer and use it in GitHub Desktop.
Download ZIP
Build script to help convert Framer projects to Cordova iOS builds
Raw
gulpfile.js
var gulp = require('gulp'),
runSequence = require('run-sequence'),
coffee = require('gulp-coffee'),
htmlreplace = require('gulp-html-replace'),
del = require('del'),
copy = require('gulp-copy'),
wait = require('gulp-wait'),
gutil = require('gulp-util'),
cordova = require("cordova-lib").cordova;
var coffeeStream = coffee({bare: true});
// Attach listener
coffeeStream.on('error', gutil.log);
var paths = {
framer: "./my-framer-project.framer/",
cordova: "./deploy-cordova/",
build: "./deploy-cordova/www/"
}
gulp.task('default', function() {
// place code for your default task here
});
gulp.task('cordova', function() {
runSequence( 'cordova:clean', 'cordova:copy', ['cordova:coffee', 'cordova:html'], 'cordova:run-build' );
// runSequence( 'cordova:run-build' ) );
});
gulp.task('cordova:run-build', function() {
process.chdir(__dirname + '/deploy-cordova');
return cordova.build({}, function(){ process.chdir('../'); });
});
gulp.task('cordova:coffee', function() {
return gulp.src(paths.build + "**/*.coffee")
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(gulp.dest(paths.build));
});
gulp.task('cordova:html', function() {
return gulp.src(paths.build + "index.html")
.pipe( htmlreplace( { js: [
'framer/framer.js',
'framer/framer.modules.js',
'app.js'
]}))
.pipe(gulp.dest(paths.build));
});
gulp.task('cordova:copy', function() {
return gulp.src(paths.framer + "**/*")
.pipe(gulp.dest(paths.build));
});
gulp.task('cordova:clean', function() {
return del( [
paths.build + "**/*"
] );
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script type="text/javascript">
// This automatically sets the right viewport scale on mobile devices
(function() {
var scale = 1 / window.devicePixelRatio
var viewport = "width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no"
var iOS = /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS) { viewport += ", shrink-to-fit=no" }
document.write("<meta name=\"viewport\" content=\"" + viewport + "\">")
})()
</script>
<link rel="apple-touch-icon" href="framer/images/icon-120.png">
<link rel="apple-touch-icon" href="framer/images/icon-76.png" sizes="76x76">
<link rel="apple-touch-icon" href="framer/images/icon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="framer/images/icon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="framer/images/icon-180.png" sizes="180x180">
<link rel="apple-touch-icon" href="framer/images/icon-192.png" sizes="192x192">
<link rel="stylesheet" type="text/css" href="framer/style.css">
<!-- build:js -->
<script src="framer/coffee-script.js"></script>
<script src="framer/framer.js"></script>
<script src="framer/framer.generated.js"></script>
<script src="framer/framer.modules.js"></script>
<script src="framer/framer.init.js"></script>
<!-- endbuild -->
</head>
<body>
</body>
</html>
Raw
package.json
{
"name": "framer-to-cordova",
"version": "1.0.0",
"description": "",
"dependencies": {},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"devDependencies": {
"cordova-lib": "^6.0.0",
"del": "^2.2.0",
"gulp": "^3.9.0",
"gulp-coffee": "^2.3.1",
"gulp-copy": "0.0.2",
"gulp-html-replace": "^1.5.5",
"gulp-util": "^3.0.7",
"gulp-wait": "0.0.2",
"run-sequence": "^1.1.5"
}
}
@hellonicolas
Copy link
Author

Currently only for an iOS Cordova project, but I'm sure this can easily be adapted to work for other platforms.

Running gulp cordova will do the following:

  • Empty Cordova project's www folder
  • Copy Framer.js files over to Cordova www folder
  • Compile Coffeescript files to JS
  • Modify index.html JS includes
  • Run cordova build to update iOS build

Prerequisites

  • Make sure you have npm installed :)
  • Make sure you wrap Framer's index.html file with the changes above; wrap the JS includes with <!-- build:js --> and <!-- endbuild --> so the build script can modify that part accordingly
  • If Cordova CLI is not already installed, run npm install -g cordova
  • In terminal window, go to project root
  • Run npm-install to install dependencies
  • Run mkdir deploy-cordova
  • cd deploy-cordova
  • Run cordova create .
  • Run cordova platform add ios
  • Go back one folder to project root and run gulp cordova to convert Framer project to Cordova

Folder Structure

Assumes this folder structure. Change paths as needed :)

project-base/
│
├── /gulpfile.js
│
├── /package.json
│
├── /my-framer-project.framer/
│
│   ├── /index.html
│   ├── (all other Framer project assets)
│
└── /deploy-cordova/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment