We Keep Coding

Browserify + Gulp + Babelify ~ import' and 'export' may appear only with 'sourceType: module

I'm working on a project and want to use gulp to automate some tasks, to compile js and other code.
I'm using Browserify and Babelify in combination with the babel-eslint to set my sourcetype to module however i still get this ParseError when I'm trying to import node_modules in my main.js file
ParseError: 'import' and 'export' may appear only with 'sourceType:
module'
Is there a way to fix this?
My gulp file
const gulp = require('gulp');
const sass = require('gulp-sass');
const minify = require('gulp-minify');
const rename = require('gulp-rename');
const browserify = require('browserify');
const babelify = require('babelify');
const tap = require('gulp-tap');
const flatmap = require('gulp-flatmap');
const logger = require('gulplog');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('vinyl-buffer');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
gulp.task('default', function () {
let b = browserify({
entries: './resources/js/main.js',
debug: true,
cache: {},
packageCache: {},
fullPaths: true,
transform: [babelify.configure({
presets: ['#babel/preset-env']
})]
})
return b.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add other gulp transformations (eg. uglify) to the pipeline here.
.on('error', (error) => {
logger.error(error);
})
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/js/'));
});
Package.json
{
"name": "portfolio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"bulma": "^0.9.0"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#vizuaalog/bulmajs": "^0.11.0",
"babel-eslint": "^8.2.6",
"babelify": "^10.0.0",
"browserify": "^16.5.1",
"eslint": "^4.19.1",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-flatmap": "^1.0.2",
"gulp-minify": "^3.1.0",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-tap": "^2.0.0",
"gulplog": "^1.0.0",
"node-sass": "^4.14.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"#babel/preset-env"
]
}
]
]
},
"author": "",
"license": "ISC"
}
eslint.rc
{
"ecmaFeatures": {
"modules": true,
"spread": true,
"restParams": true
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-unused-vars": 2,
"no-undef": 2
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
}
}

Npm module "" not found. Is it installed?

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

Error running grunt plugin grunt-contrib-cssmin

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']
}
}
},

GruntJs Tasks issues

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.

Copy all files but ignored in .gitignore

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.