New approach for the compiling of the plugin

.gitignore

@@ -1,7 +1,32 @@
-node_modules
-dist
-dist-final
-typings
-*.d.ts
+# Node
+node_modules/*
 npm-debug.log
-todo.md
+
+# TypeScript
+src/*.js
+src/*.map
+src/*.d.ts
+
+# JetBrains
+.idea
+.project
+.settings
+.idea/*
+*.iml
+
+# VS Code
+.vscode/*
+
+# Windows
+Thumbs.db
+Desktop.ini
+
+# Mac
+.DS_Store
+**/.DS_Store
+
+# Ngc generated files
+**/*.ngfactory.ts
+
+# Build files
+dist/*

.npmignore

@@ -0,0 +1,34 @@
+# Node
+node_modules/*
+npm-debug.log
+docs/*
+# DO NOT IGNORE TYPESCRIPT FILES FOR NPM
+# TypeScript
+# *.js
+# *.map
+# *.d.ts
+
+# JetBrains
+.idea
+.project
+.settings
+.idea/*
+*.iml
+
+# VS Code
+.vscode/*
+
+# Windows
+Thumbs.db
+Desktop.ini
+
+# Mac
+.DS_Store
+**/.DS_Store
+
+# Ngc generated files
+**/*.ngfactory.ts
+
+# Library files
+src/*
+build/*

gulpfile.js

@@ -1,12 +1,231 @@
-const gulp = require('gulp');
-const inlineNg2Template = require('gulp-inline-ng2-template');
-
-gulp.task('inline-templates', function () {
- return gulp.src('dist/**/*.ts')
- .pipe(inlineNg2Template({
- useRelativePaths: true,
- indent: 0,
- removeLineBreaks: true,
- }))
- .pipe(gulp.dest('dist'));
+/* eslint-disable */
+var gulp = require('gulp'),
+ path = require('path'),
+ ngc = require('@angular/compiler-cli/src/main').main,
+ rollup = require('gulp-rollup'),
+ rename = require('gulp-rename'),
+ del = require('del'),
+ runSequence = require('run-sequence'),
+ inlineResources = require('./tools/gulp/inline-resources');
+
+const rootFolder = path.join(__dirname);
+const srcFolder = path.join(rootFolder, 'src');
+const tmpFolder = path.join(rootFolder, '.tmp');
+const buildFolder = path.join(rootFolder, 'build');
+const distFolder = path.join(rootFolder, 'dist');
+
+/**
+ * 1. Delete /dist folder
+ */
+gulp.task('clean:dist', function () {
+
+ // Delete contents but not dist folder to avoid broken npm links
+ // when dist directory is removed while npm link references it.
+ return deleteFolders([distFolder + '/**', '!' + distFolder]);
+});
+
+/**
+ * 2. Clone the /src folder into /.tmp. If an npm link inside /src has been made,
+ * then it's likely that a node_modules folder exists. Ignore this folder
+ * when copying to /.tmp.
+ */
+gulp.task('copy:source', function () {
+ return gulp.src([`${srcFolder}/**/*`, `!${srcFolder}/node_modules`])
+ .pipe(gulp.dest(tmpFolder));
+});
+
+/**
+ * 3. Inline template (.html) and style (.css) files into the the component .ts files.
+ * We do this on the /.tmp folder to avoid editing the original /src files
+ */
+gulp.task('inline-resources', function () {
+ return Promise.resolve()
+ .then(() => inlineResources(tmpFolder));
+});
+
+
+/**
+ * 4. Run the Angular compiler, ngc, on the /.tmp folder. This will output all
+ * compiled modules to the /build folder.
+ */
+gulp.task('ngc', function () {
+ return ngc({
+ project: `${tmpFolder}/tsconfig.es5.json`
+ })
+ .then((exitCode) => {
+ if (exitCode === 1) {
+ // This error is caught in the 'compile' task by the runSequence method callback
+ // so that when ngc fails to compile, the whole compile process stops running
+ throw new Error('ngc compilation failed');
+ }
+ });
+});
+
+/**
+ * 5. Run rollup inside the /build folder to generate our Flat ES module and place the
+ * generated file into the /dist folder
+ */
+gulp.task('rollup:fesm', function () {
+ return gulp.src(`${buildFolder}/**/*.js`)
+ // transform the files here.
+ .pipe(rollup({
+
+ // Bundle's entry point
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#entry
+ entry: `${buildFolder}/index.js`,
+
+ // Allow mixing of hypothetical and actual files. "Actual" files can be files
+ // accessed by Rollup or produced by plugins further down the chain.
+ // This prevents errors like: 'path/file' does not exist in the hypothetical file system
+ // when subdirectories are used in the `src` directory.
+ allowRealFiles: true,
+
+ // A list of IDs of modules that should remain external to the bundle
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#external
+ external: [
+ '@angular/core',
+ '@angular/common',
+ 'ionic-angular',
+ 'rxjs/Subject',
+ ],
+
+ // Format of generated bundle
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#format
+ format: 'es'
+ }))
+ .pipe(gulp.dest(distFolder));
 });
+
+/**
+ * 6. Run rollup inside the /build folder to generate our UMD module and place the
+ * generated file into the /dist folder
+ */
+gulp.task('rollup:umd', function () {
+ return gulp.src(`${buildFolder}/**/*.js`)
+ // transform the files here.
+ .pipe(rollup({
+
+ // Bundle's entry point
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#entry
+ entry: `${buildFolder}/index.js`,
+
+ // Allow mixing of hypothetical and actual files. "Actual" files can be files
+ // accessed by Rollup or produced by plugins further down the chain.
+ // This prevents errors like: 'path/file' does not exist in the hypothetical file system
+ // when subdirectories are used in the `src` directory.
+ allowRealFiles: true,
+
+ // A list of IDs of modules that should remain external to the bundle
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#external
+ external: [
+ '@angular/core',
+ '@angular/common',
+ 'ionic-angular',
+ 'rxjs/Subject',
+ ],
+
+ // Format of generated bundle
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#format
+ format: 'umd',
+
+ // Export mode to use
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#exports
+ exports: 'named',
+
+ // The name to use for the module for UMD/IIFE bundles
+ // (required for bundles with exports)
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#modulename
+ moduleName: 'ionic-gallery-modal',
+
+ // See https://github.com/rollup/rollup/wiki/JavaScript-API#globals
+ globals: {
+ typescript: 'ts'
+ }
+
+ }))
+ .pipe(rename('ionic-gallery-modal.umd.js'))
+ .pipe(gulp.dest(distFolder));
+});
+
+/**
+ * 7. Copy all the files from /build to /dist, except .js files. We ignore all .js from /build
+ * because with don't need individual modules anymore, just the Flat ES module generated
+ * on step 5.
+ */
+gulp.task('copy:build', function () {
+ return gulp.src([`${buildFolder}/**/*`, `!${buildFolder}/**/*.js`])
+ .pipe(gulp.dest(distFolder));
+});
+
+/**
+ * 8. Copy package.json from /src to /dist
+ */
+gulp.task('copy:manifest', function () {
+ return gulp.src([`${srcFolder}/package.json`])
+ .pipe(gulp.dest(distFolder));
+});
+
+/**
+ * 9. Copy README.md from / to /dist
+ */
+gulp.task('copy:readme', function () {
+ return gulp.src([path.join(rootFolder, 'README.MD')])
+ .pipe(gulp.dest(distFolder));
+});
+
+/**
+ * 10. Delete /.tmp folder
+ */
+gulp.task('clean:tmp', function () {
+ return deleteFolders([tmpFolder]);
+});
+
+/**
+ * 11. Delete /build folder
+ */
+gulp.task('clean:build', function () {
+ return deleteFolders([buildFolder]);
+});
+
+gulp.task('compile', function () {
+ runSequence(
+ 'clean:dist',
+ 'copy:source',
+ 'inline-resources',
+ 'ngc',
+ 'rollup:fesm',
+ 'rollup:umd',
+ 'copy:build',
+ 'copy:manifest',
+ 'copy:readme',
+ 'clean:build',
+ 'clean:tmp',
+ function (err) {
+ if (err) {
+ console.log('ERROR:', err.message);
+ deleteFolders([distFolder, tmpFolder, buildFolder]);
+ } else {
+ console.log('Compilation finished succesfully');
+ }
+ });
+});
+
+/**
+ * Watch for any change in the /src folder and compile files
+ */
+gulp.task('watch', function () {
+ gulp.watch(`${srcFolder}/**/*`, ['compile']);
+});
+
+gulp.task('clean', ['clean:dist', 'clean:tmp', 'clean:build']);
+
+gulp.task('build', ['clean', 'compile']);
+gulp.task('build:watch', ['build', 'watch']);
+gulp.task('default', ['build:watch']);
+
+/**
+ * Deletes the specified folder
+ */
+function deleteFolders(folders) {
+ return del(folders);
+}