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};],
Related
I recently updated my NodeJS version to 'v16.13.2' and ever since then my template I built is breaking when trying to bundle the scss and css. Everything else works just fine when building.
I'm aware that node-sass had been deprecated and I should use sass (dart-sass). However, when I run my build I get this error:
Module parse failed: C:\Users\...\src\styles\styles.scss Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
| h1 {
| color: white;
| text-align: center;
# ./src/app.js 25:0-31
# multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js
I'm trying to get basic css to work but the loader doesn't seem to recognize the code.
Here is my code
package.json:
"scripts": {
"build:dev": "webpack",
"build:prod": "webpack -p --env production",
"dev-server": "webpack-dev-server",
"test": "cross-env NODE_ENV=test jest --config=jest.config.json",
"start": "node server/server.js",
"heroku-postbuild": "yarn run build:prod"
},
"dependencies": {
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.23.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"css-loader": "^6.5.1",
"express": "4.15.4",
"extract-text-webpack-plugin": "3.0.0",
"firebase": "^8.9.1",
"history": "4.10.1",
"moment": "2.18.1",
"normalize.css": "7.0.0",
"numeral": "2.0.6",
"react": "^16.14.0",
"react-addons-shallow-compare": "15.6.0",
"react-dates": "12.7.0",
"react-dom": "^16.14.0",
"react-modal": "2.2.2",
"react-redux": "5.0.5",
"react-router-dom": "4.1.2",
"redux": "3.7.2",
"redux-mock-store": "1.2.3",
"redux-thunk": "2.2.0",
"sass": "^1.49.7",
"sass-loader": "7.3.1",
"style-loader": "0.18.2",
"uuid": "3.1.0",
"validator": "8.0.0",
"webpack": "3.1.0"
},
"devDependencies": {
"cross-env": "5.0.5",
"dotenv": "^14.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.1",
"jest": "20.0.4",
"raf": "^3.4.1",
"react-test-renderer": "^16.14.0",
"webpack-dev-server": "2.5.1"
}
webpack.cnfig.js:
return{
entry: ['babel-polyfill','./src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options:{
sourceMap: true
}
},
{
loader: 'sass-loader',
options:{
sourceMap: true
}
}
]
})
}
]
},
EDIT: So after much research, I have also figured out that 'extract-text-webpack-plugin' is also deprecated and the documentation suggests that I use 'mini-css-extract-plugin'. So, I read the documentation for that and applied it but still nothing is working. I just want my webpack to bundle my .js and .css in separate files . Right now all of it is being pushed into 'bundle.js' and it does not render any css.
EDIT 2: Here is my new webpack.config.js and it is working as I wanted:
webpack.config.js:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
if(process.env.NODE_ENV === 'test'){
require('dotenv').config({ path: '.env.test'})
}else if(process.env.NODE_ENV === 'development'){
require('dotenv').config({ path: '.env.development'})
}
module.exports = (env) => {
const isProd = env === 'production'
return{
entry: ['babel-polyfill','./src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.(css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(s[ca]ss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename:'styles.css'
}),
new webpack.DefinePlugin({
'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
'process.env.FIREBASE_MESSAGE_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGE_SENDER_ID),
'process.env.FIREBASE_APP_ID': JSON.stringify(process.env.FIREBASE_APP_ID)
})
],
devtool: isProd ? 'source-map' :'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist'
}
}
}
Alright I finally have an answer for all of this. So I essentially had to update a lot of my webpack due to deprecated modules. I ended up using 'mini-css-extract-plugin' and found out how to set it up. If anyone is working on a project using Nodejs version 16 and up, try this for the webpack and see if it works. I'll post my results in the initial question.
I am trying to use PostCSS plugin autoprefixer with grunt. I have gone through many articles and Stackoverflow answers which were relevant but still I am getting "Warning: [object Object] is not a PostCSS plugin Use --force to continue".
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'css/style.css' : 'scss/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
},
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')()
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('dev',['sass','watch']);
grunt.registerTask('build',['sass', 'postcss']);
}
package.json
"devDependencies": {
"grunt": "^1.4.0",
"grunt-contrib-sass": "^2.0.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-postcss": "^0.9.0",
"postcss": "^8.3.0",
"autoprefixer": "^10.2.6"
}
I am a newbie so please help.
Not sure yet what the root cause is, but downgrading autoprefixer to version 9 solves the issue
package.json
"devDependencies": {
"grunt": "^1.4.0",
"grunt-contrib-sass": "^2.0.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-postcss": "^0.9.0",
"postcss": "^8.3.0",
"autoprefixer": "^9.8.6"
}
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
}
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.
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.