Skip to content

Instantly share code, notes, and snippets.

@ronaldofs
Last active July 14, 2020 21:04
Show Gist options
  • Save ronaldofs/d12f3c52d882370b8d67d05b9ad10494 to your computer and use it in GitHub Desktop.
Save ronaldofs/d12f3c52d882370b8d67d05b9ad10494 to your computer and use it in GitHub Desktop.
Example setup gulp, angularjs, bower, node.js

Technologies used:

  • Gulp: run tasks
  • Bower: manage client js dependencies

Files:

  • package.json: example with dev dependencies and npm scripts
  • Gulpfile.js: example tasks
  • app.js: example express server serving static files from gulp build and all requests render the same index template

Usage:

  • Run in development: $ npm start
    • Perform cleanup, build, start server (i.e. app.js), and watches files for changes triggering server reload
  • Run in production: $ npm run production
    • Run build task and start app.js

Notes:

  • Setup source and destination paths in gulpfile.js
  • This assumes a destination folder will store all front-end code and the backend server will have to serve those files.
var path = require('path');
var express = require('express');
var PORT = 3000;
var distDir = path.resolve(__dirname, './dist');
var app = express();
app.use(express.static(distDir)); // Setup static folder
app.get('*', function(req, res) {
var mainTemplateFile = path.join(distDir, 'index.html'); // Path to main app template
res.sendFile(mainTemplateFile);
});
app.listen(PORT);
"use strict";
var gulp = require('gulp');
var concat = require('gulp-concat');
var refresh = require('gulp-livereload');
var client = require('tiny-lr')();
var nodemon = require('gulp-nodemon');
var sass = require('gulp-sass');
var del = require('del');
var concat = require('gulp-concat');
var htmlmin = require('gulp-htmlmin');
var uglify = require('gulp-uglify');
var cssmin = require('gulp-minify-css');
var bower = require('main-bower-files');
var runSequence = require('run-sequence');
var templateCache = require('gulp-angular-templatecache');
var lrPort = 35728; // Livereload port
// Paths to source files/folders to be used in tasks
var paths = {
scripts: [
'!src/client/lib/**/*.js',
'src/client/app/**/*.js'
],
vendorScripts: [
'src/client/lib/**/*.js'
],
views: [
'!src/client/lib/*.html',
'src/client/**/*.html',
'src/client/index.html'
],
styles: {
css: ['!src/client/lib/**/*.css', 'src/client/styles/css/*.css'],
sass: ['src/client/styles/sass/*.sass', 'src/client/**/*.sass'],
dest: 'src/client/styles',
vendor: 'src/client/lib/**/*.css'
},
fonts: [
'src/client/styles/fonts/*.*',
'src/client/lib/font-awesome/fonts/*.*'
],
html: 'src/client/index.html',
templates: 'src/client/app/**/*.html',
images: 'src/client/images/**.*',
favicon: 'src/client/favicon.ico'
};
// Paths to destination files/folders which will be updated during tasks
var dist = {
path: 'dist',
scripts: 'dist/js',
styles: 'dist/css',
images: 'dist/images',
fonts: 'dist/css/fonts'
};
gulp.task('serve', function() {
nodemon({ script: 'app.js', ignore: ['node_modules/**/*.js'] });
});
gulp.task('live', function() {
client.listen(lrPort, function(err) {
if (err) return console.error(err);
});
});
gulp.task('watch', function() {
gulp.watch(paths.styles.sass, ['styles']);
gulp.watch(paths.templates, ['templates']);
gulp.watch(paths.scripts, ['scripts']);
});
gulp.task('refresh', function() {
refresh(client);
});
gulp.task('clean', function(cb) {
return del(dist.path, cb);
});
gulp.task('html', function() {
return gulp.src(paths.html)
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest(dist.path))
.pipe(refresh(client));
});
gulp.task('scripts', function() {
return gulp.src([
// NOTE: be aware of dependencies between files when setting load order
"src/client/app/app.js",
"src/client/app/shared/index.js",
"src/client/app/shared/**/*.js",
"src/client/app/profile/index.js",
"src/client/app/profile/**/*.js",
"src/client/app/admin/index.js",
"src/client/app/admin/**/*.js",
])
.pipe(uglify({ mangle: false }))
.pipe(concat('app.js'))
.pipe(gulp.dest(dist.scripts))
.pipe(refresh(client));
});
gulp.task('scripts:vendor', function() {
return gulp.src(bower({ filter: /\.js$/ }))
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest(dist.scripts))
.pipe(refresh(client));
});
gulp.task('styles', function() {
return gulp.src(paths.styles.sass)
.pipe(sass())
.pipe(cssmin())
.pipe(concat('styles.css'))
.pipe(gulp.dest(dist.styles))
.pipe(refresh(client));
});
gulp.task('styles:vendor', function() {
return gulp.src(bower({ filter: /\.css$/ }))
.pipe(concat('vendor.css'))
.pipe(gulp.dest(dist.styles))
.pipe(refresh(client));
});
// AngularJS-specific task for compiling templates into angular modules
gulp.task('templates', function() {
return gulp.src(paths.templates)
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(templateCache({
module: 'app.templates', // Set module name. Import usage: angular.module('my-app', ['app.templates'])
standalone: true,
transformUrl: function(url) {
return 'app/' + url; // Set path to template
},
}))
.pipe(gulp.dest(dist.scripts))
.pipe(refresh(client));
});
gulp.task('images', function() {
return gulp.src(paths.images)
.pipe(gulp.dest(dist.images));
});
gulp.task('fonts', function() {
return gulp.src(paths.fonts)
.pipe(gulp.dest(dist.fonts));
});
gulp.task('favicon', function() {
return gulp.src(paths.favicon)
.pipe(gulp.dest(dist.path));
});
gulp.task('build', [
'html',
'scripts',
'scripts:vendor',
'styles',
'styles:vendor',
'templates',
'images',
'fonts',
'favicon',
]);
gulp.task('default', function() {
runSequence('clean', 'build', 'live', 'serve', 'watch');
});
process.once('SIGINT', function() {
process.exit(0);
});
{
"name": "project-name",
"description": "",
"scripts": {
"start": "gulp",
"production": "gulp build && node app.js"
},
"devDependencies": {
"del": "^2.0.2",
"gulp": "*",
"gulp-angular-templatecache": "^2.0.0",
"gulp-concat": "^2.6.0",
"gulp-htmlmin": "^1.2.0",
"gulp-jshint": "*",
"gulp-livereload": "*",
"gulp-minify-css": "^1.2.1",
"gulp-ng-templates": "0.0.6",
"gulp-nodemon": "*",
"gulp-sass": "*",
"gulp-task-listing": "*",
"gulp-uglify": "*",
"main-bower-files": "^2.9.0",
"tiny-lr": "*"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment