I do use all of those (though gulp very infrequently), however I now use Grunt to consolidate and all minify Javascript - including OS frameworks and UDFs, in addition to SASS so that nothing in the bower_components or node_modules directories is deployed (unless there’s a need for node on the server).
I .gitignore node_modules and bower_components and then have a Gruntfile.js that looks something like this:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
sass: {
files: ['includes/sass/compile/**/*.{scss,sass}','includes/sass/include/**/*.{scss,sass}'],
tasks: ['sass:dist']
},
javascript: {
files: 'includes/javascript/lib/**/*.js',
tasks: ['uglify:mysite']
},
livereload: {
files: ['css/*.css'],
options: {
livereload: false
}
}
},
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
dist: {
files: {
'includes/css/styles.css': 'includes/sass/compile/styles.scss'
}
}
},
uglify: {
mysite:{
options: {
//beautify: true,
//mangle: false,
// the banner is inserted at the top of the output
banner: '/*! MySite Core Libraries. Generated: <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
files: {
'includes/javascript/mysite.js': ['includes/javascript/_globals.js','includes/javascript/lib/**/*.js']
}
},
libraries:{
options:{
preserveComments: true,
banner: '/*! MySite Consolidated Open Source Libraries. Generated: <%= grunt.template.today("dd-mm-yyyy") %> */\n\n'
},
files: {
'mysite/javascript/lib.js':
[
'bower_components/jquery/dist/jquery.min.js',
'bower_components/bootstrap/dist/js/bootstrap.min.js',
'bower_components/jQuery.mmenu/src/js/jquery.mmenu.min.js',
'bower_components/arrive/src/arrive.js',
'bower_components/angular/angular.min.js',
'bower_components/angular-sanitize/angular-sanitize.min.js',
'js/media.js',
'includes/javascript/provider/gmaps.3.8.js',
'includes/javascript/provider/gmaps.infobubble.js',
'includes/javascript/provider/jquery.scrollto.js'
]
}
}
}
});
grunt.registerTask('default', ['sass:dist', 'uglify', 'watch']);
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
};
You can then publish your core javascript (don’t forget to retain the licensing comments!) and css files in directories that work with your conventions (I tend to use the Coldbox directory conventions for includes) and use npm and grunt only in development.
My SCSS file include the bower *-sass packages (i.e - bootstrap-sass and font-awesome-sass), though I do need to copy the FA font files over to the appropriate directory.
As Luis said, you can also configure .bowerrc to use a custom location. I tend to prefer the above because it keeps all of the dev packages completely separate from anything I plan to ship.
HTH,
Jon
