Skip to content

Instantly share code, notes, and snippets.

@mattlockyer

mattlockyer/custom-grunt.js

Created January 10, 2019 15:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mattlockyer/acd3443137bad3d2854c5b680f816462 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mattlockyer/acd3443137bad3d2854c5b680f816462 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Gruntfile for materializecss
Raw
custom-grunt.js
const files = [
'js/cash.js',
'js/component.js',
'js/global.js',
'js/anime.min.js',
// 'js/collapsible.js',
// 'js/dropdown.js',
// 'js/modal.js',
// 'js/materialbox.js',
// 'js/parallax.js',
// 'js/tabs.js',
// 'js/tooltip.js',
// 'js/waves.js',
// 'js/toasts.js',
// 'js/sidenav.js',
// 'js/scrollspy.js',
// 'js/autocomplete.js',
// 'js/forms.js',
// 'js/slider.js',
// 'js/cards.js',
// 'js/chips.js',
// 'js/pushpin.js',
// 'js/buttons.js',
// 'js/datepicker.js',
// 'js/timepicker.js',
// 'js/characterCounter.js',
// 'js/carousel.js',
// 'js/tapTarget.js',
// 'js/select.js',
// 'js/range.js'
]
module.exports = function(grunt) {
let concatFile = 'temp/js/materialize_concat.js.map';
// configure the tasks
let config = {
// Jasmine
jasmine: {
components: {
src: ['bin/materialize.js'],
options: {
vendor: [
'node_modules/jquery/dist/jquery.min.js',
'node_modules/jasmine-jquery/lib/jasmine-jquery.js'
],
styles: 'bin/materialize.css',
specs: 'tests/spec/**/*Spec.js',
helpers: 'tests/spec/helper.js',
keepRunner: true
//helpers: 'test/spec/*.js'
}
}
},
// Sass
sass: {
// Task
expanded: {
// Target options
options: {
outputStyle: 'expanded',
sourcemap: false
},
files: {
'dist/css/materialize.css': 'sass/materialize.scss'
}
},
min: {
options: {
outputStyle: 'compressed',
sourcemap: false
},
files: {
'dist/css/materialize.min.css': 'sass/materialize.scss'
}
},
// Compile ghpages css
gh: {
options: {
outputStyle: 'compressed',
sourcemap: false
},
files: {
'css/ghpages-materialize.css': 'sass/ghpages-materialize.scss'
}
},
// Compile bin css
bin: {
options: {
outputStyle: 'expanded',
sourcemap: false
},
files: {
'bin/materialize.css': 'sass/materialize.scss'
}
}
},
// PostCss Autoprefixer
postcss: {
options: {
processors: [
require('autoprefixer')({
browsers: [
'last 2 versions',
'Chrome >= 30',
'Firefox >= 30',
'ie >= 10',
'Safari >= 8'
]
})
]
},
expanded: {
src: 'dist/css/materialize.css'
},
min: {
src: 'dist/css/materialize.min.css'
},
gh: {
src: 'css/ghpages-materialize.css'
},
bin: {
src: 'bin/materialize.css'
}
},
babel: {
options: {
sourceMap: false,
plugins: [
'transform-es2015-arrow-functions',
'transform-es2015-block-scoping',
'transform-es2015-classes',
'transform-es2015-template-literals',
'transform-es2015-object-super'
]
},
bin: {
options: {
sourceMap: true
},
files: {
'bin/materialize.js': 'temp/js/materialize_concat.js'
}
},
dist: {
files: {
'dist/js/materialize.js': 'temp/js/materialize.js'
}
}
},
// Browser Sync integration
browserSync: {
bsFiles: ['bin/*', 'css/ghpages-materialize.css', '!**/node_modules/**/*'],
options: {
server: {
baseDir: './' // make server from root dir
},
port: 8000,
ui: {
port: 8080,
weinre: {
port: 9090
}
},
open: false
}
},
// Concat
concat: {
options: {
separator: ';'
},
dist: {
// the files to concatenate
src: files,
// the location of the resulting JS file
dest: 'temp/js/materialize.js'
},
temp: {
// the files to concatenate
options: {
sourceMap: true,
sourceMapStyle: 'link'
},
src: files,
// the location of the resulting JS file
dest: 'temp/js/materialize_concat.js'
}
},
// Uglify
uglify: {
options: {
// Use these options when debugging
// mangle: false,
// compress: false,
// beautify: true
},
dist: {
files: {
'dist/js/materialize.min.js': ['dist/js/materialize.js']
}
},
bin: {
files: {
'bin/materialize.min.js': ['bin/materialize.js']
}
},
extras: {
files: {
'extras/noUiSlider/nouislider.min.js': ['extras/noUiSlider/nouislider.js']
}
}
},
// Compress
compress: {
main: {
options: {
archive: 'bin/materialize.zip',
level: 6
},
files: [
{ expand: true, cwd: 'dist/', src: ['**/*'], dest: 'materialize/' },
{ expand: true, cwd: './', src: ['LICENSE', 'README.md'], dest: 'materialize/' }
]
},
src: {
options: {
archive: 'bin/materialize-src.zip',
level: 6
},
files: [
{ expand: true, cwd: 'sass/', src: ['materialize.scss'], dest: 'materialize-src/sass/' },
{ expand: true, cwd: 'sass/', src: ['components/**/*'], dest: 'materialize-src/sass/' },
{
expand: true,
cwd: 'js/',
src: files,
dest: 'materialize-src/js/'
},
{ expand: true, cwd: 'dist/js/', src: ['**/*'], dest: 'materialize-src/js/bin/' },
{ expand: true, cwd: './', src: ['LICENSE', 'README.md'], dest: 'materialize-src/' }
]
},
starter_template: {
options: {
archive: 'templates/starter-template.zip',
level: 6
},
files: [
{ expand: true, cwd: 'dist/', src: ['**/*'], dest: 'starter-template/' },
{
expand: true,
cwd: 'templates/starter-template/',
src: ['index.html', 'LICENSE'],
dest: 'starter-template/'
},
{
expand: true,
cwd: 'templates/starter-template/css',
src: ['style.css'],
dest: 'starter-template/css'
},
{
expand: true,
cwd: 'templates/starter-template/js',
src: ['init.js'],
dest: 'starter-template/js'
}
]
},
parallax_template: {
options: {
archive: 'templates/parallax-template.zip',
level: 6
},
files: [
{ expand: true, cwd: 'dist/', src: ['**/*'], dest: 'parallax-template/' },
{
expand: true,
cwd: 'templates/parallax-template/',
src: ['index.html', 'LICENSE', 'background1.jpg', 'background2.jpg', 'background3.jpg'],
dest: 'parallax-template/'
},
{
expand: true,
cwd: 'templates/parallax-template/css',
src: ['style.css'],
dest: 'parallax-template/css'
},
{
expand: true,
cwd: 'templates/parallax-template/js',
src: ['init.js'],
dest: 'parallax-template/js'
}
]
}
},
// Clean
clean: {
temp: {
src: ['temp/']
}
},
// Jade
jade: {
compile: {
options: {
pretty: true,
data: {
debug: false
}
},
files: {
'index.html': 'jade/index.jade',
'icons.html': 'jade/icons.jade',
'about.html': 'jade/about.jade',
'sass.html': 'jade/sass.jade',
'getting-started.html': 'jade/getting-started.jade',
'mobile.html': 'jade/mobile.jade',
'showcase.html': 'jade/showcase.jade',
'parallax.html': 'jade/parallax.jade',
'parallax-demo.html': 'jade/parallax-demo.jade',
'typography.html': 'jade/typography.jade',
'color.html': 'jade/color.jade',
'shadow.html': 'jade/shadow.jade',
'grid.html': 'jade/grid.jade',
'media-css.html': 'jade/media-css.jade',
'table.html': 'jade/table.jade',
'helpers.html': 'jade/helpers.jade',
'buttons.html': 'jade/buttons.jade',
'navbar.html': 'jade/navbar.jade',
'cards.html': 'jade/cards.jade',
'preloader.html': 'jade/preloader.jade',
'collections.html': 'jade/collections.jade',
'badges.html': 'jade/badges.jade',
'footer.html': 'jade/footer.jade',
'modals.html': 'jade/modals.jade',
'dropdown.html': 'jade/dropdown.jade',
'tabs.html': 'jade/tabs.jade',
'toasts.html': 'jade/toasts.jade',
'tooltips.html': 'jade/tooltips.jade',
'sidenav.html': 'jade/sidenav.jade',
'pushpin.html': 'jade/pushpin.jade',
'waves.html': 'jade/waves.jade',
'media.html': 'jade/media.jade',
'collapsible.html': 'jade/collapsible.jade',
'scrollspy.html': 'jade/scrollspy.jade',
'fullscreen-slider-demo.html': 'jade/fullscreen-slider-demo.jade',
'pagination.html': 'jade/pagination.jade',
'breadcrumbs.html': 'jade/breadcrumbs.jade',
'carousel.html': 'jade/carousel.jade',
'feature-discovery.html': 'jade/feature-discovery.jade',
'pulse.html': 'jade/pulse.jade',
'pushpin-demo.html': 'jade/pushpin-demo.jade',
'css-transitions.html': 'jade/css-transitions.jade',
'themes.html': 'jade/themes.jade',
'404.html': 'jade/404.jade',
'autocomplete.html': 'jade/autocomplete.jade',
'checkboxes.html': 'jade/checkboxes.jade',
'chips.html': 'jade/chips.jade',
'pickers.html': 'jade/pickers.jade',
'radio-buttons.html': 'jade/radio-buttons.jade',
'range.html': 'jade/range.jade',
'select.html': 'jade/select.jade',
'switches.html': 'jade/switches.jade',
'text-inputs.html': 'jade/text-inputs.jade',
'support-us.html': 'jade/support-us.jade',
'floating-action-button.html': 'jade/floating-action-button.jade',
'auto-init.html': 'jade/auto-init.jade'
}
}
},
// Watch Files
watch: {
jade: {
files: ['jade/**/*'],
tasks: ['jade_compile'],
options: {
interrupt: false,
spawn: false
}
},
js: {
files: ['js/**/*', '!js/init.js'],
tasks: ['js_compile'],
options: {
interrupt: false,
spawn: false
}
},
sass: {
files: ['sass/**/*'],
tasks: ['sass_compile'],
options: {
interrupt: false,
spawn: false
}
}
},
// Concurrent
concurrent: {
options: {
logConcurrentOutput: true,
limit: 10
},
monitor: {
tasks: [
'jade_compile',
'sass_compile',
'js_compile',
'watch:jade',
'watch:js',
'watch:sass',
'notify:watching',
'server'
]
}
},
// Notifications
notify: {
watching: {
options: {
enabled: true,
message: 'Watching Files!',
title: 'Materialize', // defaults to the name in package.json, or will use project directory's name
success: true, // whether successful grunt executions should be notified automatically
duration: 1 // the duration of notification in seconds, for `notify-send only
}
},
sass_compile: {
options: {
enabled: true,
message: 'Sass Compiled!',
title: 'Materialize',
success: true,
duration: 1
}
},
js_compile: {
options: {
enabled: true,
message: 'JS Compiled!',
title: 'Materialize',
success: true,
duration: 1
}
},
jade_compile: {
options: {
enabled: true,
message: 'Jade Compiled!',
title: 'Materialize',
success: true,
duration: 1
}
},
server: {
options: {
enabled: true,
message: 'Server Running!',
title: 'Materialize',
success: true,
duration: 1
}
}
},
// Text Replace
replace: {
version: {
// Does not edit README.md
src: ['bower.json', 'package.json', 'package.js', 'jade/**/*.html'],
overwrite: true,
replacements: [
{
from: grunt.option('oldver'),
to: grunt.option('newver')
}
]
},
readme: {
// Changes README.md
src: ['README.md'],
overwrite: true,
replacements: [
{
from: 'Current Version : v' + grunt.option('oldver'),
to: 'Current Version : v' + grunt.option('newver')
}
]
}
},
// Create Version Header for files
usebanner: {
release: {
options: {
position: 'top',
banner:
'/*!\n * Materialize v' +
grunt.option('newver') +
' (http://materializecss.com)\n * Copyright 2014-2017 Materialize\n * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)\n */',
linebreak: true
},
files: {
src: ['dist/css/*.css', 'dist/js/*.js']
}
}
},
// Rename files
rename: {
rename_src: {
src: 'bin/materialize-src' + '.zip',
dest: 'bin/materialize-src-v' + grunt.option('newver') + '.zip',
options: {
ignore: true
}
},
rename_compiled: {
src: 'bin/materialize' + '.zip',
dest: 'bin/materialize-v' + grunt.option('newver') + '.zip',
options: {
ignore: true
}
}
}
};
grunt.initConfig(config);
// load the tasks
// grunt.loadNpmTasks('grunt-gitinfo');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-notify');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-banner');
grunt.loadNpmTasks('grunt-rename-util');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-babel');
// define the tasks
grunt.registerTask('release', [
'sass:expanded',
'sass:min',
'postcss:expanded',
'postcss:min',
'concat:dist',
'babel:dist',
'uglify:dist',
'uglify:extras',
'usebanner:release',
'compress:main',
'compress:src',
'compress:starter_template',
'compress:parallax_template',
'replace:version',
'replace:readme',
'rename:rename_src',
'rename:rename_compiled',
'clean:temp'
]);
grunt.task.registerTask('configureBabel', 'configures babel options', function() {
config.babel.bin.options.inputSourceMap = grunt.file.readJSON(concatFile);
});
grunt.registerTask('jade_compile', ['jade', 'notify:jade_compile']);
grunt.registerTask('js_compile', ['concat:temp', 'configureBabel', 'babel:bin', 'clean:temp']);
grunt.registerTask('sass_compile', [
'sass:gh',
'sass:bin',
'postcss:gh',
'postcss:bin',
'notify:sass_compile'
]);
grunt.registerTask('server', ['browserSync', 'notify:server']);
grunt.registerTask('monitor', ['concurrent:monitor']);
grunt.registerTask('travis', ['js_compile', 'sass_compile', 'jasmine']);
};
@jaybe78
Copy link

jaybe78 commented Feb 25, 2021

@matt Your script returns the following issue

 Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config can
  be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist


Running "sass:expanded" (sass) task
Fatal error: The implementation option must be passed to the Sass task

@mattlockyer
Copy link
Author

mattlockyer commented Feb 25, 2021

It's old and I don't use anymore. Any suggestion on how to fix?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment