Grunt newbie here. I'm receiving the following error when I run the grunt task grunt-contrib-cssmin. The modernizr task seems to be working:
Running "cssmin:target" (cssmin) task
Warning: pattern.indexOf is not a function Use --force to continue.
Here is my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig ({
// Do grunt-related things in here
pkg: grunt.file.readJSON('package.json'),
modernizr_builder: {
build: {
options: {
features: 'pointerevents',
dest: 'javascripts/modernizr-custom.js'
}
}
},
cssmin: {
/*options: {
shorthandCompacting: false,
roundingPrecision: -1
},*/
target: {
files: {
files: {
'css/min/bigvideo.min.css': ['css/bigvideo.css']
}
}
}
},
});
grunt.loadNpmTasks('grunt-modernizr-builder');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default',['modernizr_builder', 'cssmin']);
};
Here is my package.json file, I have the grunt-contrib-css installed in the project directory
{
"name": "bootstrap-wp-less",
"version": "1.0.0",
"description": "No desc",
"main": "index.js",
"scripts": {
"test": "test"
},
"author": "Me",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-modernizr-builder": "^0.1.7"
}
}
My error was in the cssmin task, changed to:
cssmin: {
/*options: {
shorthandCompacting: false,
roundingPrecision: -1
},*/
target: {
files: {
'css/min/bigvideo.min.css': ['css/bigvideo.css']
}
}
},
Related
Hey so I have been trying to do Internationalisation with my stencil project but it's not working i don't know whats wrong this is all i getting
i know 404 means its not able to find the file or whatever but i followed these articles and none of them havig this issues and i did exact steps as in these articles
https://medium.com/stencil-tricks/implementing-internationalisation-i18n-with-stencil-5e6559554117
and
https://dev.to/teamhive/using-i18n-translations-within-stencil-components-4n30
here's my package.json
{
"name": "iii",
"version": "0.0.1",
"description": "Stencil Component Starter",
"main": "dist/index.cjs.js",
"module": "dist/index.js",
"es2015": "dist/esm/index.mjs",
"es2017": "dist/esm/index.mjs",
"types": "dist/types/index.d.ts",
"collection": "dist/collection/collection-manifest.json",
"collection:main": "dist/collection/index.js",
"unpkg": "dist/iii/iii.esm.js",
"repository": {
"type": "git",
"url": "https://github.com/ionic-team/stencil-component-starter.git"
},
"files": [
"dist/",
"loader/"
],
"scripts": {
"build": "stencil build --docs",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watchAll",
"generate": "stencil generate"
},
"dependencies": {
"#stencil/core": "^2.13.0"
},
"devDependencies": {
"#types/jest": "^27.0.3",
"jest": "^27.4.5",
"jest-cli": "^27.4.5",
"puppeteer": "^10.0.0"
},
"license": "MIT"
}`
stencil.config.json
import { Config } from '#stencil/core';
export const config: Config = {
namespace: 'iii',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
},
{
type: 'dist-custom-elements',
},
{
type: 'docs-readme',
},
{
type: 'www',
serviceWorker: null, // disable service workers
},
],
copy: [
{
src: "**/*.i18n.*.json",
dest: "i18n"
}
]
};
`
and as for the code i write exact code as in the given articles
I really need some tips or any articles or help ,anything which can help me do Internationalisation in stencil
Looks like the files aren't copied, or not to where you expect. Verify whether they are actually in the dist and/or www folders.
Also, since Stencil 2 the copy task has been moved into the output target configuration (see breaking changes) so try moving it into the www output target config:
import { Config } from '#stencil/core';
export const config: Config = {
namespace: 'iii',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
},
{
type: 'dist-custom-elements',
},
{
type: 'docs-readme',
},
{
type: 'www',
serviceWorker: null, // disable service workers
copy: [
{
src: "**/*.i18n.*.json",
dest: "i18n"
}
],
},
],
};
This is strange. Using this tutorial: https://ntdln.com/2017/07/25/using-javascript-modules/ I tried to do get the modules thing in JS. I run npm istall grunt-browserify --save-dev along with the other packages. My package.json file is
{
"name": "example",
"version": "0.1.0",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babelify": "^8.0.0",
"browserify": "^14.5.0",
"grunt": "^0.4.5",
"grunt-autoprefixer": "^3.0.4",
"grunt-contrib-imagemin": "^2.0.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^3.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-es6-transpiler": "^1.0.2",
"grunt-typescript": "^0.8.0",
"typescript": "^2.4.2"
}
}
So the packages are there. I tried removing my nodemodules folder and installing it with npm insatll, but it didn't help.
My grunt.js file is this
module.exports = function (grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
build: {
options: {
browserifyOptions: {
debug: false
},
transform: [
[
'babelify', {
'presets': [
[
'es2015', {
'loose': true
}
]
],
'comments': false,
'compact': true,
'minified': true
}
]
]
},
src: [
'_dev/js/app.js',
],
dest: './scripts/app.es5.min.js'
}
},
// es6transpiler: {
// dist: {
// files: {
// '_dev/js/app.es5.js': '_dev/js/app.js'
// }
// }
// },
// uglify: {
// build: {
// src: "_dev/js/app.es5.js",
// dest: "scripts/app.es5.min.js"
// }
// },
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'_dev/css/app.min.css': '_dev/scss/app.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'content/app.prefixed.min.css': '_dev/css/app.min.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '_dev/assets/images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'assets/img/'
}]
}
},
watch: {
scripts: {
files: ['_dev/js/*.js'],
tasks: ['browserify', 'uglify'],
options: {
spawn: false,
}
},
css: {
files: '_dev/scss/app.scss',
tasks: ['sass', 'autoprefixer']
}
} //End watch
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('browserify');
grunt.loadNpmTasks('babelify');
grunt.loadNpmTasks('babel-preset-es2015');
// grunt.loadNpmTasks('grunt-contrib-uglify');
// grunt.loadNpmTasks('grunt-es6-transpiler');
// grunt.loadNpmTasks('grunt-contrib-requirejs');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask(
'default', [
// 'es6transpiler',
// 'uglify',
'browserify',
'babelify',
'babel-preset-es2015',
'sass',
'autoprefixer',
'imagemin',
'watch'
]);
};
Still all I'm getting after running grunt is:
>> Local Npm module "browserify" not found. Is it installed?
>> Local Npm module "babelify" not found. Is it installed?
>> Local Npm module "babel-preset-es2015" not found. Is it installed?
Use grunt browserify like below :
npm install grunt-browserify --save-dev
And after installing :
grunt.loadNpmTasks('grunt-browserify');
And same thing for other modules
GruntJS file give me an error,
and my package.json
{
"name": "todolist",
"version": "0.0.0",
"description": "todolist uygulamasi",
"main": "index.html",
"author": "Yedinci",
"scripts": {
"build": "browserify js/main.js -o js/output.js",
},
"license": "ISC",
"devDependencies": {
"browserify": "^13.0.0",
"grunt": "^0.4.5",
"grunt-contrib-compass": "^1.0.4",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-uglify": "^0.11.0",
"grunt-contrib-watch": "^0.6.1",
"jquery": "^2.2.0",
}
}
and I couldn't solve.How to solve this issues ? what does unexpected token ?
Remove the commas at the end of:
"build": "browserify js/main.js -o js/output.js",
and
"jquery": "^2.2.0",
as they are the last name/values pairs defined in the object.
could be caused by the trailing commas. Try this:
module.exports = function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
watch: {
js: {
files: ['js/**/*.js'],
tasks: ['uglify']
}
},
compass: {
dev: {
options: {
sassDir: ['sass/scss'],
cssDir: ['css/css'],
environment: 'development'
}
}
},
cssmin:{
combine:{
files:{
'css/output.css':['css/screen.css','css/print.css']
}
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/output.css': 'sass/main.scss'
}
}
},
// uglify..
uglify:{
dist:{
files:{
'js/output.js':['node_modules/jquery/dist/jquery.js','node_modules/bootstrap/bootstrap.js','js/main.js']
}
}
}
});
//load plugin
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// do the task
grunt.registerTask('default',['cssmin','sass','uglify']);
};
in your gruntfile.js, you are missing a task named "watch". Just because you installed the npm package, doesn't automatically create grunt tasks for you.
I want to copy all files to another dir (with grunt-contrib-copy) except files that are listed in .gitignore.
This is my current setup:
.gitignore:
/vendor
/node_modules
package.json:
{
"name": "grunt-cpy",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gitignore-globs": "^0.1.1",
"grunt": "^0.4.5",
"grunt-cli": "~0.1.11",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-clean": "^0.6.0"
}
}
Gruntfile.js
module.exports = function (grunt) {
var parse = require('gitignore-globs');
var globs = parse('.gitignore', { negate: true } );
grunt.log.ok( globs );
// Project configuration.
grunt.initConfig({
pkg : grunt.file.readJSON( 'package.json' ),
clean: {
pre_build: [
'build/'
]
},
copy: {
build: {
options : {
mode :true
},
src: [
'**',
globs
],
dest: 'build/'
}
}
});
grunt.loadNpmTasks( 'grunt-contrib-clean' );
grunt.loadNpmTasks( 'grunt-contrib-copy' );
grunt.registerTask( 'default', [ 'clean:pre_build', 'copy'] );
};
Debug output of globs:
!/vendor,!/vendor/**,!/node_modules,!/node_modules/**
But it doesn't work this way. It just copies everything. I also tried the package 'gitignore-to-glob' and 'grunt-copy-to'. Can somebody help to archive this?
I'm on Windows.
When I run the command grunt I receive the error:
Warning: Task "default" not found. Use --force to continue.
My Gruntfile.js :
module.export = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'dist/flatify.css':'sass/style.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'dist/dist/flatify.css':'dist/flatify.css'
}
}
},
cssmin: {
css: {
scr: 'dist/flatify.css',
dest: 'dist/flatify.min.css'
}
},
watch: {
css:{
files: '**/*.scss',
tasks: ['sass','autoprefixer','cssmin:css']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass','autoprefixer', 'cssmin']);
}
My package.json:
{
"name": "Flatify",
"version": "0.0.1",
"description": "An beautiful CSS framework",
"repository": {
"type": "git",
"url": "https://github.com/1ClickComputing/Flatify.git"
},
"keywords": [
"CSS"
],
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/1ClickComputing/Flatify/issues"
},
"homepage": "https://github.com/1ClickComputing/Flatify",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^2.0.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "^0.6.1"
}
}
The first line is incorrect in your Gruntfile. Should be:
module.exports = function (grunt)
It misses the s at exports.