My Gruntfile checks which Git branch I'm on (dev, test or prod) and if "prod" I want to minify/compress the CSS with compass (grunt-contrib-compass).
But I'm unable to change the outputStyle property in compass options.
However I'm able to change my custom meta.build.outputStyle to "compressed" in the deploy function, but unable to change compass.site_x.options.outputStyle by reading that meta variable. Any ideas?
Gruntfile summary (parts excluded):
module.exports = function(grunt) {
grunt.initConfig({
meta:{
build: {
outputStyle: 'expanded'
}
},
compass: {
site_x: {
options: { // Target options
sassDir: 'sass',
specify: 'sass/legacy/main.scss',
cssDir: 'dist/styles',
imagesDir: "images",
outputStyle: "<%= meta.build.outputStyle %>",
config: "./config.rb"
}
}
},
.... //misc
});
.... //misc
function deploy(environment) {
if(environment === "prod") {
grunt.log.oklns("Starting deploy to PROD");
grunt.config.set("meta.build.outputStyle", "compressed");
grunt.log.oklns("outputStyle: "+grunt.config.get('meta').build.outputStyle); // prints "compressed"
}
}
....
Related
I am trying to use javascript Const with Grunt Uglify but receive the error:
Unexpected token: keyword «const».
I have done a little googling and tried
npm install terser-webpack-plugin --save-dev
However that did not work.
It was stated I needed to add the following to my Plugins array...
const TerserPlugin = require('terser-webpack-plugin')
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6,
},
}),
I wasn't sure exactly where to add this though? Does it go in my grunt file.js?
Additionally I also saw that a fix might be to use the harmony branch of grunt-contrib-uglify. But I fear this method is out of date?
Ultimately I am attempting to code a cookie consent pop up. Does anyone know how to get Const to work with grunt uglify?
Or does anyone have a better recommendation for coding cookie consent pop ups?
Many thanks.
Edit: Adding grunt file as requested
// Load Grunt
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Tasks
sass: { // Begin Sass Plugin (this takes all your scss files and compiles them into style.css)
dist: {
files: [{
expand: true,
cwd: 'assets/scss/my-theme',
src: ['**/*.scss'],
dest: 'dist/css',
ext: '.css'
}]
}
},
postcss: { // Begin Post CSS Plugin (this applies browser prefixes to your compiled style.css in 'dist' folder)
options: {
map: false,
processors: [
require('autoprefixer')({
overrideBrowserslist: ['last 2 versions']
})
]
},
dist: {
src: 'dist/css/style.css'
}
},
cssmin: { // Begin CSS Minify Plugin (this takes your style.css file from 'dist', minifies it and creates style.min.css)
target: {
files: [{
expand: true,
cwd: 'dist/css',
src: ['style.css', '!*.min.css'],
dest: 'dist/css',
ext: '.min.css'
}]
}
},
uglify: { // Begin JS Uglify Plugin (this takes your my-theme js files in 'assets', minifies them and creates script.min.js in 'dist' folder)
build: {
src: ['assets/js/my-theme/*.js'],
dest: 'dist/js/script.min.js'
}
},
watch: { // Compile everything into one task with Watch Plugin (this watches for any changes to scss and js files, so make sure it is pointing to your 'my-theme' CSS and JS folders in 'assets')
css: {
files: 'assets/scss/my-theme/**/*.scss',
tasks: ['sass', 'postcss', 'cssmin']
},
js: {
files: 'assets/js/my-theme/**/*.js',
tasks: ['uglify']
}
}
});
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-terser');
// Register Grunt tasks
grunt.registerTask('default', ['watch']);
};
I am using docker to make image to run my frontend.
It's running perfectly in my laptop but on my server, I cant access it through my browser.
You can see my screenshot to see what my browser is saying about that.
So, my project is in angular (grunt-cli) frontend, backend is in flask and database is mongodb.
Backend is working fine but grunt-cli, I am not able to access it through browser but I can do
curl http://:9000 to see the content.
Here is my Gruntfile.js --
module.exports = function(grunt) {
// ===========================================================================
// CONFIGURE GRUNT ===========================================================
// ===========================================================================
grunt.initConfig({
// get the configuration info from package.json ----------------------------
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// configure jshint to validate js files -----------------------------------
jshint: {
options: {
reporter: require('jshint-stylish')
},
all: ['Grunfile.js', 'src/components/**/*.js']
},
// configure uglify to minify js files -------------------------------------
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/components.min.js': 'src/components/**/*.js'
}
}
},
// compile less stylesheets to css -----------------------------------------
less: {
build: {
files: {
'dist/css/pretty.css': 'src/css/pretty.less'
}
}
},
// configure cssmin to minify css files ------------------------------------
cssmin: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/css/style.min.css': 'src/css/style.css'
}
}
},
// configure watch to auto update ------------------------------------------
watch: {
stylesheets: {
files: ['src/**/*.css', 'src/**/*.less'],
tasks: ['less', 'cssmin']
},
scripts: {
files: 'src/**/*.js',
tasks: ['jshint', 'uglify']
}
},
express:{
all:{
options:{
port:9000,
hostname:'0.0.0.0',
bases:['./src'],
livereload: true
}
}
}
});
// ===========================================================================
// LOAD GRUNT PLUGINS ========================================================
// ===========================================================================
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
// ===========================================================================
// CREATE TASKS ==============================================================
// ===========================================================================
grunt.registerTask('serve-waalos', ['jshint','cssmin','uglify','express','watch']);
grunt.registerTask('default', ['test', 'build']);
};
This is my first day with grunt and I'm trying to make it work using these tutorials
https://24ways.org/2013/grunt-is-not-weird-and-hard/
https://css-tricks.com/autoprefixer/
And my Gruntfile.js is this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['scripts/app.js'],
tasks: ['uglify'],
options: {
spawn: false,
}//For some reason I had a come here. Don't know if it matters
},
css: {
files: ['content/app.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
styles: {
files: ['content/app.css'],
tasks: ['autoprefixer']
}
},
uglify: {
build: {
src: "scripts/app.js",
dest: "scripts/app-final.js"
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'content/app.css': 'content/app.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'content/app-prefixed.css': 'content/app.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'assets/img/'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask(
'default', [
'watch',
'uglify',
'sass',
'autoprefixer',
'imagemin'
]);
};
But when I try grunt watch watch I get this:
# grunt watch
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
To make things weirder grunt uglify is seen
# grunt uglify
Running "uglify:build" (uglify) task
>> Destination scripts/app-final.js not written because src files were empty.
>> No files created.
Done, without errors.
Running grunt --help gives me an interesting thing
Available tasks
uglify Minify files with UglifyJS. *
default Alias for "watch", "uglify", "sass", "autoprefixer", "imagemin" tasks.
I really cannot find a difference between uglify and the other functions. VS Code doesn't give me any errors. I installed all of the used tasks. I have node installed.
Restarting VS Code doesn't help. I don't think this matters but just in case, I'm using Linux.
Reinstalling the dependencies didn't help either
You did the following:
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
Replace it with this:
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
Grunt does not take multiple Arguments in grunt.loadNpmTasks for some reason. You can see the proper usage of the loadNpmTasks - function in the documentation: https://gruntjs.com/sample-gruntfile
I have a folder with differents design project, on each one I may have scss files to compile. So I did a Gruntfile to watch on all this folders for the scss files and I want to compile them in their directory. But it' actually not working because of this error :
Running "sassAll" task
Running "sass:animating-rocket" (sass) task
Verifying property sass.animating-rocket exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.animating-rocket" missing. Use --force to continue.
Aborted due to warnings.
It seems that a variable is not define on the config scope...
My Gruntfile looks like this :
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
src: ['<%= grunt.task.current.args[0] %>/*.scss'],
dest: '<%= grunt.task.current.args[0] %>',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
css: {
files: ['**/*.scss'],
tasks: ['sassAll'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('sassAll', function () {
gruntUtils.sassTasks.forEach(function (param) {
grunt.task.run('sass:' + param);
});
});
var gruntUtils = {
sassTasks: ['animating-rocket', 'hamburger-animation']
};
grunt.registerTask('default', ['sassAll', 'watch']);
};
I've done a fair bit of searching but can't seem to come up with a full answer to this.
I'm using grunt to manage my sass flow and I've been trying to find a way to output multiple css styles from grunt.
For example:
base.scss should have two outputs the first being style.css which has the expanded css style.
The second should be style.min.css which has the compressed css style.
How can I configure my gruntfile to do this for me?
You can do this by having two configurations, one outputting expanded CSS and the other compressed. Then register your task to run both. Your grunt file should look something like this:
Example
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
dev: { // This outputs the expanded css file
files: {
'style.css': 'base.scss'
}
},
prod: { // This outputs the compressed css file
options: {
outputStyle: 'compressed' // Minify output
},
files: {
'style.min.css': 'base.scss'
}
}
}
});
grunt.registerTask('default', ['sass:dev', 'sass:prod']); // Task runs both
}
Here is a more complete solution of what belongs in gruntfile.js, improving upon what Colin Bacon has already posted. By default grunt's pkg is already set to read package.json in the current directory, so no need to write that. You just need to install the jit-grunt plugin (besides the watch and sass plugins of course) to get my answer working.
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
sass: {
expanded: { // Target
options: { // Target options
style: 'expanded'
},
files: { // Dictionary of files
'style.css': 'style.scss' // 'destination': 'source'
}
},
compressed: { // Target
options: { // Target options
style: 'compressed'
},
files: { // Dictionary of files
'style.min.css': 'style.scss' // 'destination': 'source'
}
}
},
watch: {
styles: {
files: ['**/*.scss'], // which files to watch
tasks: ['sass'],
options: {
spawn: false // speeds up watch reaction
}
}
}
});
grunt.registerTask('default', ['sass', 'watch']);
};
Just add a new manifest file in your styles folder. For example, you have normally main.scss, if you create main2.scss and import some files in there. It will create a file for each manifest file you have.
If your sass task looks something like this (default yeoman webapp generator):
sass: {
options: {
sourceMap: true,
includePaths: ['bower_components']
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
},
server: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
}
}
The file section sass read all .scss/.sass files and copy those to .tmp/styles. Later, copy task move those to dist/styles.