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.
Related
My main code. I has "require('node-rsa')" which in node_modules folder. Is it possible to create one file from this code?
a.js
var testFunct = function test(message) {
const NodeRSA = require('node-rsa');
const key = new NodeRSA();
var k = key.generateKeyPair();
var p = k.exportKey('pkcs1');
return p};
console.log(testFunct())
package.json
{
"name": "pol",
"version": "1.0.0",
"description": "",
"main": "a.js",
"dependencies": {
"node-rsa": "^1.1.1",
"build": "webpack a.js b.js"
},
"devDependencies": {
"webpack": "^5.58.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
webpack.config.js
module.exports = {
entry: ['a.js'],
output: {
path: './build',
filename: 'bundle.js'
}
}
Add this entry to the scripts section of your package.json:
"build": "webpack"
This will trigger webpack, when you run the build action.
I am trying to run the ESLint JSDoc plugin
When I run npx eslint . airbnb rules are enforced but not the jsdoc ones requiring to add JSDoc.
Am I missing something ?
Here is a test repo
package.json
{
"name": "eslint-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.7.2",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsdoc": "^18.4.3"
}
}
index.js
const fn = (a) => {
console.log('a :', a);
return a;
};
module.exports = { fn };
You are missing the ESLint configuration file. Add .eslintrc.js to the root of your project. Then copy the following basic configuration:
module.exports = {
root: true,
plugins: ['jsdoc', 'import'],
extends: [
'eslint:recommended',
'plugin:jsdoc/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'airbnb-base'
]
}
See Configuring ESLinf for more informaion.
how can I bundle jquery and jquery.lazy with webpack? - Everytime I try this, I got an error.
My error is the following in the debug console of my browser:
TypeError: q is undefined
The rest is working fine. Maybe you can see that I've done something wrong.
My package.json:
{
"name": "mrd-apple",
"version": "1i.0.0",
"description": "mrd Apple",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"jquery-lazy": "^1.7.10",
"postcss-loader": "^3.0.0",
"webpack": "^4.29.3"
},
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1",
"webpack-cli": "^3.2.3"
}
}
}
My webpack.config.js
var webpack = require('webpack');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = function(env) {
return {
entry: ['./src/js/index.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
"css-loader"
]
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
}
}
Content of index.js
// JS
// require('./jquery.lazy');
require('./lightslider');
require('./simple-lightbox');
require('./init');
// CSS
require('./../css/index.css');
your issue is with how you are trying to use require.js
First of all, there are issues with your package.json:
both webpack and postcss-loader are devDependencies.
Also your version is invalid.
I had to add the following as devDependencies: uglifyjs-webpack-plugin, mini-css-extract-plugin, optimize-css-assets-webpack-plugin
The issue, however, is how you are trying to include these libraries.
When using require.js with a package.json and webpack, you would not be trying to require the .js file itself, instead you would either require('npm-package-name') or, better yet, import NpmPackageName from 'npm-package-name'; See: Dependency Management
If you wanted to load a library through HTML on your page and instead just reference it in your source, you can do that using webpack externals. See: Webpack Externals
for reference, here are my versions of your files:
package.json:
{
"name": "mrd-apple",
"version": "1.0.0",
"description": "mrd Apple",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"jquery-lazy": "^1.7.10"
},
"devDependencies": {
"css-loader": "^2.1.0",
"mini-css-extract-plugin": "^0.5.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3"
}
}
index.js:
// require('jquery');
// require('jquery-lazy');
import $ from 'jquery';
import jqueryLazy from 'jquery-lazy';
NOTE: I was unable to produce the exact error you provided, but assume it's due to the project setup itself.
I have configured it as instructed at: https://www.npmjs.com/package/browser-sync-webpack-plugin
This is my webpack.config.js file
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const config = {
mode: 'production',
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
watch: true,
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: {
baseDir: ['dist']
}
})
]
}
module.exports = config;
package.json
{
"name": "real-estate-2",
"private": true,
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync-webpack-plugin": "^2.2.2",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3"
},
"dependencies": {
"lodash": "^4.17.10",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}
But when I run the webpack I got this error on terminal:
Error: Cannot find module 'browser-sync-webpack-plugin'
I have installed the browser-sync-webpack-plugin as instructed: npm install --save-dev browser-sync-webpack-plugin
npm install --save-dev browser-sync
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']
}
}
},