Css file is not getting generated even after scss is getting compiling successfully - gruntjs

Below is my code of gruntjs css file is not getting generated even after the scss is compiled successfully with no error
I have tried using the different version and i am using the windows 8
Grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat:{
js:{
src: 'C:/Local_code/js/*.js',
dest: 'C:/Local_code/src/build.js',
reporterOutput:''
},
css: {
src: 'css/*.css',
dest: 'build/main.css'
}
},
autoprefixer:{
dist:{
files:{
'css/foundation.css':'css/foundation.css'
}
}
},
sass: {
dist: {
options: {
compass: true,
sourceMap:true
},
files: [{
expand: true,
cwd: 'C:/Local-code/Scss/',
src: 'C:/Local-code/Scss/*.scss/',
dest: 'C:/Local-code/build/pratik.css',
ext: '.css'
}]
}
},
postcss: {
options: {
map: true,
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('pixrem')(),
//require('autoprefixer')({browsers: 'last 2 versions'}),
require('cssnano')()
]
},
dist: {
src: 'css/*.css'
}
},
})
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss'); //The “src” folder will hold your unprocessed CSS files, and PostCSS will write your compiled CSS files into the “dest” folder.
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify-es');
grunt.loadNpmTasks('grunt-contrib-watch');
//grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('default', ['watch']);
//grunt.registerTask('build', ['autoprefixer']);
};
Package.json
{
"name": "project",
"version": "1.0.0",
"description": "Aem Project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "pratik",
"license": "ISC",
"dependencies": {
"autoprefixer": "^9.6.1",
"compass": "^0.1.1",
"cssnano": "^4.1.10",
"express": "^4.17.1",
"pixrem": "^5.0.0",
"uglify-js": "github:mishoo/UglifyJS2#harmony"
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"devDependencies": {
"grunt": "^1.0.4",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^4.0.1",
"grunt-contrib-uglify-es": "^3.3.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-postcss": "^0.9.0",
"ng-packagr": "^5.3.0",
"uglifyjs-webpack-plugin": "^1.3.0"
}
}
Expected result it should generate the valid css file in destination path.
Actual result css file i not getting generated and no error are coming.

Related

object Object is not a PostCSS plugin | PostCSS Autoprefixer

I am trying to use Grunt PostCSS Autoprefixer but it keeps saying that it is not a PostCSS plugin:
package.json
{
"name": "test",
"version": "0.2.0",
"description": "test",
"keywords": [
""
],
"author": "",
"license": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"cssmin": "^0.4.3",
"cssnano": "^5.0.6",
"grunt": "^1.4.1",
"grunt-babel": "^8.0.0",
"grunt-contrib-cssmin": "^4.0.0",
"grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "^1.1.0"
},
"devDependencies": {
"#babel/core": "^7.14.5",
"#babel/preset-env": "^7.14.5",
"autoprefixer": "^10.2.6",
"grunt-postcss": "^0.9.0",
"grunt-postcss-import": "0.0.1",
"grunt-prettify": "^0.4.0",
"postcss": "^8.3.2"
}
}
Gruntfile.js
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
// require('pixrem')(),
require('autoprefixer')(),
//require('cssnano')()
]
},
dist: {
src: 'dist/css/bundle.css'
}
},
I made sure to first remove the grunt-autoprefixer and install autoprefixer which should be a postcss plugin.
It turns out it was just a version compatibility issue. I simply changed:
"autoprefixer": "^10.2.6",
with:
"autoprefixer": "^9.7.4",

Cannot find module 'babylonjs'

index.ts
import { Engine } from '#babylonjs/core/Engine/engine';
[tsl] ERROR in ~/Documents/babylon1/src/index.ts(1,24)
TS2307: Cannot find module '#babylonjs/core/Engines/engine'.
I've followed the steps on the Babylon documentation pages, and the troubleshooting notes at https://doc.babylonjs.com/features/npm_support#error-ts2307-cannot-find-module-babylonjs-or-other-modules. I've added "babylonjs" to tscong.json, but I'm still getting the "Cannot find module #babylonjs/core" error.
package.json
"devDependencies": {
"#babylonjs/core": "^4.0.3",
"ts-loader": "^6.2.1",
"typescript": "^3.7.4",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"babylonjs": "^4.0.3"
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"sourceMap": true,
"noImplicitAny": true,
"strictNullChecks": false,
"module": "es6",
"target": "es6",
"types": [
"babylonjs"
]
}
}
I did npm install just to make sure nothing is missing.
The following setup works. The #babylonjs/core/... imports resolve correctly, and webpack-dev-server builds and reloads automatically.
package.json
"devDependencies": {
"#babylonjs/core": "^4.0.3",
"ts-loader": "^6.2.1",
"typescript": "^3.7.4",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"module": "esNext",
"target": "es6",
"moduleResolution": "node"
}
}
NOTE: types: ["babylonjs"] doesn't seem to be necessary
webpack.config.js
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
hot: true
}

Webpack --watch doesn't trigger for CSS files in specific directory

Using webpack --watch, changes to .pcss (PostCSS) files are not picked up when within [src/components/Main/]. Changes to .js files are picked up fine as well as .pcss files in other directories. Because my web app is isomorphic, ExtractTextPlugin is used to squish all the CSS together and push it into a single file.
Full code on GitHub.
This is on macOS 10.12.X.
webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const babelPresetEnvExclude = require('./config/babel-preset-env.exclude')
const babelPluginRelay = ['relay', { schema: 'data/schema.graphqls', }]
const styleRules = {
test: /\.p?css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
'postcss-loader',
],
}),
}
const fileRules = {
test: /\.((pn|sv|jpe?)g|gif)$/,
use: ['file-loader'],
}
const server = {
target: 'node',
entry: './build/unbundled/server.js',
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'build')
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
plugins: [babelPluginRelay],
},
}],
},
styleRules,
fileRules,
]
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
// Overwrites the same file created by the browser webpack config. A loader
// needs to be specified to take care of the import statements and it wont
// work without also outputting a file. There has to be a better way to
// handle this, but I want to focus on other parts for now.
// #todo: make this less bad.
new ExtractTextPlugin('public/main.css'),
]
}
const browser = {
target: 'web',
entry: './build/unbundled/browser.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build/public')
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['env', {
debug: true,
useBuiltIns: true,
targets: { browsers: ['last 2 versions'] },
exclude: babelPresetEnvExclude
}]
],
plugins: [babelPluginRelay],
},
}],
},
styleRules,
fileRules,
]
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
new ExtractTextPlugin('main.css'),
]
}
console.log('NODE_ENV', JSON.stringify(process.env.NODE_ENV || 'development'))
module.exports = [browser, server]
package.json:
{
"name": "rtm-owl",
"version": "1.0.0",
"main": "index.js",
"author": "boring#example.com",
"license": "MIT",
"scripts": {
"relay": "relay-compiler --src ./build/unbundled --schema data/schema.graphqls",
"build": "tsc --pretty && npm run relay && webpack --progress",
"debug": "npm run build && node --inspect build/server.js",
"debug-brk": "npm run build && node --inspect-brk build/server.js",
"start": "node build/server.js",
"watch": "concurrently --kill-others 'tsc --pretty --watch' 'relay-compiler --src ./build/unbundled --schema data/schema.graphqls --watch' 'webpack --watch' 'nodemon build/server.js'"
},
"devDependencies": {
"#types/chart.js": "^2.6.1",
"#types/debug": "^0.0.30",
"#types/express": "^4.0.36",
"#types/fs-extra": "^4.0.0",
"#types/isomorphic-fetch": "^0.0.34",
"#types/lodash": "^4.14.71",
"#types/morgan": "^1.7.32",
"#types/react": "^16.0.0",
"#types/react-chartjs-2": "^2.0.2",
"#types/react-dom": "^15.5.1",
"#types/react-redux": "^4.4.47",
"#types/serialize-javascript": "^1.3.1",
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-relay": "^1.1.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"concurrently": "^3.5.0",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"fs-extra": "^4.0.0",
"isomorphic-fetch": "^2.2.1",
"nodemon": "^1.11.0",
"postcss-css-variables": "^0.7.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"postcss-nested": "^2.1.0",
"relay-compiler": "^1.1.0",
"relay-runtime": "^1.1.0",
"serialize-javascript": "^1.3.0",
"style-loader": "^0.18.2",
"typescript": "^2.4.1",
"webpack": "^3.0.0"
},
"dependencies": {
"chart.js": "^2.6.0",
"debug": "^2.6.8",
"express": "^4.15.3",
"farce": "^0.2.1",
"found": "^0.3.1",
"found-relay": "^0.3.0-alpha.4",
"lodash": "^4.17.4",
"morgan": "^1.8.2",
"react": "^15.6.1",
"react-chartjs-2": "^2.5.5",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-relay": "^1.0.0",
"redux": "^3.7.2"
}
}
I encountered similar behaviour, webpack --watch does not react to changes in css files on macOS 10.14. I used the basic style-loader and css-loader and require my css files like require('./style.css').
Solved by switching to nodemon. In my package.json the following setup runs webpack whenever js or css files become modified.
...
scripts: {
"build": "webpack",
"watchbuild": "nodemon --watch ./ --ext js,css --ignore dist --exec \"npm run build\"",
...
},
devDependencies: {
"nodemon": "^2.0.4",
"webpack": "^4.39.3",
...
}
...
The setup can be easily customized to watch more file types and to execute a series of commands. For example nodemon --watch ./ --ext js,ejs,css,pcss --ignore dist --exec 'npm run lint && npm run build' will also watch ejs templates and pcss styles and run linter before build.
Note that I had to ignore my build directory dist to prevent infinite build loop. Note also \" instead of ' to provide compatibility between macOS and Windows.

gruntfile.js Unable to compile; no valid source files were found

I am new to grunt and I'm having a tough time trying to figure out what I've done wrong.
When I run it I get the error "Unable to compile; no valid source files were found."
If anyone could give me some advice as to how to fix it, I would appreciate it.
Here is my gruntfile:
module.exports = function(grunt) {
grunt.initConfig ({
responsive_images: {
dev: {
options: {
engine: 'im',
sizes: [{
width: 1600,
suffix: '_large_2x',
quality: 30
}]
},
files: [{
expand: true,
src: ['**/*.{gif,jpg,png};'],
cwd: 'images_src/',
dest: 'images/'
}]
}
},
});
grunt.loadNpmTasks('grunt-responsive-images');
grunt.loadNpmTasks('grunt-contrib-imagemin')
grunt.registerTask('default', ['responsive_images']);};
Here is my Package.json
{
"name": "reponsive-images",
"version": "0.1.0",
"repository": {
"type": "git",
"url": "https://github.com/udacity/responsive-images.git"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-clean": "~0.6.0",
"grunt-contrib-copy": "~0.8.0",
"grunt-contrib-imagemin": "^1.0.1",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-mkdir": "~0.1.2"
},
"dependencies": {
"grunt-responsive-images": "^0.1.6"
}
}
Any advice you guys can provide would be appreciated!
I solved it!
I needed to edit my src path to: ['/**/*.{gif,jpg,png};],

gruntfile is giving me errors in terminal

learning grunt.js and I keep getting this error in Terminal.
Running "sass:dist" (sass) task
Warning: Path must be a string. Received undefined Use --force to continue.
Aborted due to warnings.
Here's the code. Any help would be great
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/** Sass task **/
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none',
},
files: {
'compiled/style.css': 'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none',
},
files: {
'compiled/style-min.css': 'sass/style-min.scss'
}
}
},
/** Watch task **/
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
}
and here my json
{
"name": "millervolpe2016",
"version": "1.0.0",
"description": "Our company's new theme",
"main": "index.php",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jspraguemillervolpe/miller-volpe.git"
},
"keywords": [
"miller",
"volpe"
],
"author": "Jason Sprague",
"license": "ISC",
"bugs": {
"url": "https://github.com/jspraguemillervolpe/miller-volpe/issues"
},
"homepage": "https://github.com/jspraguemillervolpe/miller-volpe#readme",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-autoprefixer": "^3.0.4",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "^1.0.0"
},
"dependencies": {}
}
your sass dist: and files: should be like that:
files: {
'compiled/style-min.css': 'sass/style.scss'
}
The file you are pointing is sass/style.scss so you should use the same for dist and dev.
this file: 'sass/style-min.scss' does not exist in your project and in your dev sass you are using: 'sass/style.scss' , I did a test here and now sass:dist works fine if you change this.
let me know if that fix your problem.
thanks.

Resources