diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100755 index 21e10d116..000000000 --- a/Gruntfile.js +++ /dev/null @@ -1,227 +0,0 @@ -module.exports = function (grunt) { - // time - require('time-grunt')(grunt); - - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - - // Compress and zip only the files required for deployment to the server. Exclude all dev dependencies. - compress: { - main: { - options: { - archive: 'packaged/<%= pkg.name %>' + grunt.template.today('_yyyy-mm-dd_HH-MM') + '.zip', - mode: 'zip' - }, - expand: true, - cwd: '.', - src: [ - '**/*', - '!**/node_modules/**', - '!**/components/**', - '!**/scss/**', - '!**/bower.json', - '!**/Gruntfile.js', - '!**/package.json', - '!**/composer.json', - '!**/composer.lock', - '!**/codesniffer.ruleset.xml', - '!**/packaged/*' - ], - dest: '<%= pkg.name %>' - }, - }, - sass: { - - options: { - // If you can't get source maps to work, run the following command in your terminal: - // $ sass scss/foundation.scss:css/foundation.css --sourcemap - // (see this link for details: http://thesassway.com/intermediate/using-source-maps-with-sass ) - sourceMap: true - }, - - dist: { - options: { - outputStyle: 'compressed' - }, - files: { - 'assets/stylesheets/foundation.css': 'assets/scss/foundation.scss' - } - } - - }, - - copy: { - - motionUi: { - expand: true, - cwd: 'assets/components/motion-ui/', - src: '**', - flatten: 'true', - dest: 'assets/javascript/vendor/motion-ui/' - }, - - whatInput: { - expand: true, - cwd: 'assets/components/what-input/', - src: '**', - flatten: 'true', - dest: 'assets/javascript/vendor/what-input/' - }, - - iconfonts: { - expand: true, - cwd: 'assets/components/fontawesome/fonts', - src: ['**'], - dest: 'assets/fonts/' - } - - }, - - concat: { - - options: { - separator: ';' - }, - - dist: { - - src: [ - - // Foundation core - 'assets/components/foundation-sites/js/foundation.core.js', - - // Foundation utils - 'assets/components/foundation-sites/js/foundation.util.box.js', - 'assets/components/foundation-sites/js/foundation.util.keyboard.js', - 'assets/components/foundation-sites/js/foundation.util.mediaQuery.js', - 'assets/components/foundation-sites/js/foundation.util.motion.js', - 'assets/components/foundation-sites/js/foundation.util.nest.js', - 'assets/components/foundation-sites/js/foundation.util.timerAndImageLoader.js', - 'assets/components/foundation-sites/js/foundation.util.touch.js', - 'assets/components/foundation-sites/js/foundation.util.triggers.js', - - // Foundation components -> Comment out the components you don't need in your project - 'assets/components/foundation-sites/js/foundation.abide.js', - 'assets/components/foundation-sites/js/foundation.accordion.js', - 'assets/components/foundation-sites/js/foundation.accordionMenu.js', - 'assets/components/foundation-sites/js/foundation.drilldown.js', - 'assets/components/foundation-sites/js/foundation.dropdown.js', - 'assets/components/foundation-sites/js/foundation.dropdownMenu.js', - 'assets/components/foundation-sites/js/foundation.equalizer.js', - 'assets/components/foundation-sites/js/foundation.interchange.js', - 'assets/components/foundation-sites/js/foundation.magellan.js', - 'assets/components/foundation-sites/js/foundation.offcanvas.js', - 'assets/components/foundation-sites/js/foundation.orbit.js', - 'assets/components/foundation-sites/js/foundation.responsiveMenu.js', - 'assets/components/foundation-sites/js/foundation.responsiveToggle.js', - 'assets/components/foundation-sites/js/foundation.reveal.js', - 'assets/components/foundation-sites/js/foundation.slider.js', - 'assets/components/foundation-sites/js/foundation.sticky.js', - 'assets/components/foundation-sites/js/foundation.tabs.js', - 'assets/components/foundation-sites/js/foundation.toggler.js', - 'assets/components/foundation-sites/js/foundation.tooltip.js', - - // Motion UI - 'assets/components/motion-ui/motion-ui.js', - - // What-input - 'assets/components/what-input/what-input.js', - - // Include your own custom scripts (located in the custom folder) - 'assets/javascript/custom/*.js' - - ], - - // Finally, concatenate all the files above into one single file - dest: 'assets/javascript/foundation.js' - - } - - }, - - uglify: { - - dist: { - files: { - // Shrink the file size by removing spaces - 'assets/javascript/foundation.js': ['assets/javascript/foundation.js'] - } - } - - }, - - watch: { - grunt: {files: ['Gruntfile.js']}, - - sass: { - files: 'assets/scss/**/*.scss', - tasks: ['sass'], - options: { - livereload: true - } - }, - - js: { - files: 'assets/javascript/custom/**/*.js', - tasks: ['concat', 'uglify'], - options: { - livereload: true - } - }, - - all: { - files: '**/*.php', - options: { - livereload: true - } - } - - }, - - postcss: { - options: { - map: true, - processors: [ - require('pixrem')(), // add fallbacks for rem units - require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes - require('cssnano')() // minify the result - ] - }, - dist: { - src: 'assets/stylesheets/foundation.css' - } - }, - - browserSync: { - dev: { - bsFiles: { - src : [ - 'assets/stylesheets/*.css', - '**/*.php', - 'assets/javascript/**/*.js' - ] - }, - options: { - watchTask: true, - // fill in proxy address of local WP server - proxy: "" - } - } - } - }); - - grunt.loadNpmTasks('grunt-sass'); - grunt.loadNpmTasks('grunt-postcss'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-contrib-copy'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-string-replace'); - grunt.loadNpmTasks('grunt-contrib-compress'); - grunt.loadNpmTasks('grunt-browser-sync'); - - grunt.registerTask('package', ['compress:main']); - grunt.registerTask('build', ['copy', 'sass', 'postcss', 'concat', 'uglify']); - grunt.registerTask('browser-sync', ['browserSync', 'watch']); - grunt.registerTask('default', ['watch']); -}; diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 000000000..1f62fc990 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,166 @@ +var $ = require('gulp-load-plugins')(); +var argv = require('yargs').argv; +var gulp = require('gulp'); +var browserSync = require('browser-sync').create(); +var merge = require('merge-stream'); +var sequence = require('run-sequence'); +var colors = require('colors'); + +// Enter URL of your local server here +// Example: 'http://localwebsite.dev' +var URL = ''; + +// Check for --production flag +var isProduction = !!(argv.production); + +// Browsers to target when prefixing CSS. +var COMPATIBILITY = ['last 2 versions', 'ie >= 9']; + +// File paths to various assets are defined here. +var PATHS = { + sass: [ + 'assets/components/foundation-sites/scss', + 'assets/components/motion-ui/src/' + ], + javascript: [ + 'assets/components/jquery/dist/jquery.js', + 'assets/components/what-input/what-input.js', + 'assets/components/foundation-sites/js/foundation.core.js', + 'assets/components/foundation-sites/js/foundation.util.*.js', + + // Paths to individual JS components defined below + 'assets/components/foundation-sites/js/foundation.abide.js', + 'assets/components/foundation-sites/js/foundation.accordion.js', + 'assets/components/foundation-sites/js/foundation.accordionMenu.js', + 'assets/components/foundation-sites/js/foundation.drilldown.js', + 'assets/components/foundation-sites/js/foundation.dropdown.js', + 'assets/components/foundation-sites/js/foundation.dropdownMenu.js', + 'assets/components/foundation-sites/js/foundation.equalizer.js', + 'assets/components/foundation-sites/js/foundation.interchange.js', + 'assets/components/foundation-sites/js/foundation.magellan.js', + 'assets/components/foundation-sites/js/foundation.offcanvas.js', + 'assets/components/foundation-sites/js/foundation.orbit.js', + 'assets/components/foundation-sites/js/foundation.responsiveMenu.js', + 'assets/components/foundation-sites/js/foundation.responsiveToggle.js', + 'assets/components/foundation-sites/js/foundation.reveal.js', + 'assets/components/foundation-sites/js/foundation.slider.js', + 'assets/components/foundation-sites/js/foundation.sticky.js', + 'assets/components/foundation-sites/js/foundation.tabs.js', + 'assets/components/foundation-sites/js/foundation.toggler.js', + 'assets/components/foundation-sites/js/foundation.tooltip.js', + + // Motion UI + 'assets/components/motion-ui/motion-ui.js', + + // What-input + 'assets/components/what-input/what-input.js', + + // Include your own custom scripts (located in the custom folder) + 'assets/javascript/custom/*.js' + ] +}; + +// Browsersync task +gulp.task('browser-sync', ['build'], function() { + + var files = [ + '**/*.php', + 'assets/images/**/*.{png,jpg,gif}' + ]; + + browserSync.init(files, { + // Proxy address + proxy: URL, + + // Port # + // port: PORT + }); +}); + +// Compile Sass into CSS +// In production, the CSS is compressed +gulp.task('sass', function() { + // Minify CSS if run wtih --production flag + var minifycss = $.if(isProduction, $.minifyCss()); + + return gulp.src('assets/scss/foundation.scss') + .pipe($.sourcemaps.init()) + .pipe($.sass({ + includePaths: PATHS.sass + }) + .on('error', $.sass.logError)) + .pipe($.autoprefixer({ + browsers: COMPATIBILITY + })) + .pipe(minifycss) + .pipe($.if(!isProduction, $.sourcemaps.write('.'))) + .pipe(gulp.dest('assets/stylesheets')) + .pipe(browserSync.stream({match: '**/*.css'})); +}); + +// Combine JavaScript into one file +// In production, the file is minified +gulp.task('javascript', function() { + + var uglify = $.uglify() + .on('error', function (e) { + console.log(e); + }); + + return gulp.src(PATHS.javascript) + .pipe($.sourcemaps.init()) + .pipe($.concat('foundation.js')) + .pipe(uglify) + .pipe($.if(!isProduction, $.sourcemaps.write())) + .pipe(gulp.dest('assets/javascript')) + .pipe(browserSync.stream()); +}); + +// Copy task +gulp.task('copy', function() { + // Motion UI + var motionUi = gulp.src('assets/components/motion-ui/**/*.*') + .pipe($.flatten()) + .pipe(gulp.dest('assets/javascript/vendor/motion-ui')); + + // What Input + var whatInput = gulp.src('assets/components/what-input/**/*.*') + .pipe($.flatten()) + .pipe(gulp.dest('assets/javascript/vendor/what-input')); + + // Font Awesome + var fontAwesome = gulp.src('assets/components/fontawesome/fonts/**/*.*') + .pipe(gulp.dest('assets/fonts')); + + return merge(motionUi, whatInput, fontAwesome); +}); + +// Build task +// Runs copy then runs sass & javascript in parallel +gulp.task('build', function(done) { + sequence('copy', + ['sass', 'javascript'], + done); +}); + +// Default gulp task +// Run build task and watch for file changes +gulp.task('default', ['build', 'browser-sync'], function() { + // Log file changes to console + function logFileChange(event) { + var fileName = require('path').relative(__dirname, event.path); + console.log('[' + 'WATCH'.green + '] ' + fileName.magenta + ' was ' + event.type + ', running tasks...'); + } + + // Sass Watch + gulp.watch(['assets/scss/**/*.scss'], ['sass']) + .on('change', function(event) { + logFileChange(event); + }); + + // JS Watch + gulp.watch(['assets/javascript/custom/**/*.js'], ['javascript']) + .on('change', function(event) { + logFileChange(event); + }); +}); diff --git a/package.json b/package.json index cf8f12262..4b28b04ca 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "homepage": "http://foundationpress.olefredrik.com/", "bugs": "https://github.com/olefredrik/FoundationPress/issues", "license": "MIT", - "main": "Gruntfile.js", + "main": "gulpfile.js", "repository": { "type": "git", "url": "https://github.com/olefredrik/FoundationPress.git" @@ -24,29 +24,29 @@ "devDependencies": { "autoprefixer": "^6.1.0", "bower": "~1.6.4", - "cssnano": "^3.3.2", + "browser-sync": "^2.10.0", + "colors": "^1.1.2", + "gulp": "^3.9.0", + "gulp-autoprefixer": "^3.1.0", + "gulp-concat": "^2.6.0", + "gulp-flatten": "^0.2.0", + "gulp-if": "^2.0.0", + "gulp-load-plugins": "^1.1.0", + "gulp-minify-css": "^1.2.2", + "gulp-sass": "^2.1.0", + "gulp-sourcemaps": "^1.6.0", + "gulp-uglify": "^1.5.1", + "gulp-uncss": "^1.0.4", + "gulp-util": "^3.0.7", + "merge-stream": "^1.0.0", "motion-ui": "^1.1.0", - "grunt": "~0.4.5", - "grunt-browser-sync": "^2.1.3", - "grunt-cli": "^0.1.13", - "grunt-contrib-compress": "~0.14.0", - "grunt-contrib-concat": "~0.3.0", - "grunt-contrib-copy": "~0.4.1", - "grunt-contrib-uglify": "~0.2.7", - "grunt-contrib-watch": "~0.5.3", - "grunt-postcss": "^0.7.1", - "grunt-sass": "~1.1.0", - "grunt-string-replace": "~0.2.7", - "node-sass": "~3.4.1", - "pixrem": "^3.0.0", - "time-grunt": "~1.1.0" + "run-sequence": "^1.1.5", + "yargs": "^3.31.0" }, "scripts": { - "build": "grunt build", - "grunt": "grunt", - "postinstall": "bower install && grunt build", - "watch": "grunt watch", - "browsersync": "grunt browser-sync", - "package": "grunt package" + "build": "gulp build", + "watch": "gulp", + "postinstall": "bower install && gulp build", + "production": "gulp --production" } }