Skip to content

Instantly share code, notes, and snippets.

@codegenin
Last active June 7, 2017 14:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codegenin/2e3b49a80aa0433acd44 to your computer and use it in GitHub Desktop.
Save codegenin/2e3b49a80aa0433acd44 to your computer and use it in GitHub Desktop.
Gulp + Bootstrap SASS + AngularJS + Font-Awesome
"dependencies": {
"angular": "~1.4.5",
"angular-animate": "~1.4.5",
"angular-ui-router": "~0.2.15",
"animate.css": "~3.4.0",
"bootstrap": "~3.3.5",
"bootstrap-sass": "bootstrap-sass-official#~3.3.5",
"font-awesome": "fontawesome#~4.4.0",
"jquery": "~2.1.4"
}
// Gulp and plugins
var gulp = require('gulp'),
connect = require('gulp-connect'),
concat = require('gulp-concat'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
clean = require('gulp-clean');
// Source and distribution folder
var source = 'src/',
dest = 'dist/',
bowerPath = 'bower_components/';
// Fonts
var fonts = {
in: [
bowerPath + 'bootstrap-sass/assets/fonts/**/*',
bowerPath + 'font-awesome/fonts/*'
],
out: dest + 'fonts/'
};
// CSS source file: .scss files
var css = {
in: source + 'css/main.scss',
out: dest + 'css/',
watch: source + 'css/**/*',
sassOpts: {
outputStyle: 'nested',
precison: 3,
errLogToConsole: true,
includePaths: [
bowerPath + 'bootstrap-sass/assets/stylesheets',
bowerPath + 'font-awesome/scss',
]
}
};
// Copy bootstrap required fonts to dist
gulp.task('fonts', function () {
return gulp
.src(fonts.in)
.pipe(gulp.dest(fonts.out));
});
// Compile scss
gulp.task('sass', ['fonts'], function () {
return gulp.src(css.in)
.pipe(sass(css.sassOpts))
.pipe(gulp.dest(css.out));
});
// Concatenates and minify vendor scripts
gulp.task('vendor-scripts', function() {
return gulp.src([
bowerPath + 'jquery/dist/jquery.min.js',
bowerPath + 'bootstrap/dist/js/bootstrap.min.js',
])
.pipe(concat('vendor.js'))
.pipe(gulp.dest(dest + 'js/vendor/'))
.pipe(rename('vendor.min.js'))
.pipe(uglify())
.pipe(gulp.dest(dest + 'js/vendor/'));;
});
// Concatenates and minify angular scripts
gulp.task('angular-scripts', function() {
return gulp.src([
bowerPath + 'angular/angular.min.js',
bowerPath + 'angular-animate/angular-animate.min.js',
bowerPath + 'angular-route/angular-route.min.js',
bowerPath + 'angular-ui-router/release/angular-ui-router.min.js'
])
.pipe(concat('angular.js'))
.pipe(gulp.dest(dest + 'js/vendor/'))
.pipe(rename('angular.min.js'))
.pipe(uglify())
.pipe(gulp.dest(dest + 'js/vendor/'));;;
});
// Copy all html files to dist
gulp.task('copy-html-files', function () {
return gulp.src(source + '**/*.html')
.pipe(gulp.dest(dest));
});
// Copy all image files to dist
gulp.task('copy-images-files', function () {
return gulp.src(source + '**/*.{jpg,jpeg,png,gif}')
.pipe(gulp.dest(dest));
});
// Copy all js files to dist
gulp.task('copy-js-files', function () {
return gulp.src(source + '**/*.js')
.pipe(gulp.dest(dest));
});
// Clean all files in dist
gulp.task('clean', function() {
gulp.src('./dist/*')
.pipe(clean({force: true}));
});
// Run local server
gulp.task('deploy', function () {
connect.server({
root: 'dist/',
port: 8000
});
});
// Default task
gulp.task('default', [
'sass',
'vendor-scripts',
'angular-scripts',
'copy-html-files',
'copy-js-files',
'copy-images-files',
'deploy',
], function () {
gulp.watch(css.watch, ['sass']);
gulp.watch(source + '**/*.html', ['copy-html-files']);
gulp.watch(source + '**/*.js', ['copy-js-files']);
gulp.watch(source + '**/*.{jpg,jpeg,png,gif}', ['copy-images-files']);
});
"dependencies": {
"bower": "^1.5.2",
"gulp": "^3.9.0",
"gulp-clean": "^0.3.1",
"gulp-connect": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.4.1",
"gulp-sass": "^2.0.4"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment