Brunch source mapping: not hitting breakpoints in Chrome devtools - javascript

I'm using the default source mapping built into Brunch. I see the files fine, but I cannot hit breakpoints within the source mapped files. Using the Javascript access to the debugger via debugger; works, which leads me to believe it's something wrong with the Brunch side of things.
Here is my brunch-config.js:
module.exports = {
files: {
javascripts: {
joinTo: {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
entryPoints: {
'source/scripts/app.jsx': 'js/app.js'
},
order: {
before: /^(?!source)/
}
},
stylesheets: {joinTo: 'css/core.css'},
},
paths: {
watched: ['source']
},
modules: {
autoRequire: {
'js/app.js': ['source/scripts/app']
}
},
plugins: {
babel: {presets: ['latest', 'react']},
assetsmanager: {
copyTo: {
'assets': ['source/resources/*']
}
},
static: {
processors: [
require('html-brunch-static')({
processors: [
require('pug-brunch-static')({
fileMatch: 'source/views/home.pug',
fileTransform: (filename) => {
filename = filename.replace(/\.pug$/, '.html');
filename = filename.replace('views/', '');
return filename;
}
})
]
})
]
}
},
server: {
run: true,
port: 9005
}
};
I have tried setting the sourceMaps property of config to 'old' and 'absoluteUrl' and 'inline' (see Brunch config documentation) but still I do not hit breakpoints.
I run the command brunch watch --server and I am using Chrome. Same behavior in Chrome Canary. I hit the breakpoints in Firefox, no problem there.
It's interesting to note that the sourced map files have a base 64 string seemingly for their definition, something like:
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpb...
The mapping appears to be working, but why can't I hit breakpoints in Chrome devtools?
MVCE available. Follow these instructions:
Clone this example repository
npm install
brunch build (make sure it is installed globally with npm install brunch -g)
Open in Chrome devtools and set a breakpoint
Reload the app in attempt to hit the breakpoint
For additional information, here's my package.json:
{
"version": "0.0.1",
"devDependencies": {
"assetsmanager-brunch": "^1.8.1",
"babel-brunch": "^6.1.1",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-rewire": "^1.0.0-rc-5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.11.6",
"browser-sync-brunch": "^0.0.9",
"brunch": "^2.10.9",
"brunch-static": "^1.2.1",
"chai": "^3.5.0",
"es6-promise": "^3.2.1",
"eslint-plugin-react": "^5.1.1",
"expect": "^1.20.2",
"html-brunch-static": "^1.3.2",
"jquery": "~2.1.4",
"jquery-mousewheel": "^3.1.13",
"mocha": "^3.0.0",
"nib": "^1.1.0",
"nock": "^8.0.0",
"oboe": "~2.1.2",
"paper": "0.9.25",
"path": "^0.12.7",
"pug": "^2.0.0-beta10",
"pug-brunch-static": "^2.0.1",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-mock-store": "^1.1.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"reselect": "^2.5.3",
"spectrum-colorpicker": "~1.8.0",
"stylus-brunch": "^2.10.0",
"uglify-js-brunch": "^2.10.0",
"unibabel": "~2.1.0",
"when": "~3.4.5"
},
"dependencies": {
"jwt-decode": "^2.1.0",
"lodash": "^4.17.4",
"postal": "^2.0.5",
"rc-tree": "^1.3.9"
},
"scripts": {
"test": "mocha --compilers js:babel-register"
}
}
Issue created on brunch's Github.
UPDATE
Solved by fixing my brunch config as specified in the #JohannesFilter's answer to this question.

This was a byproduct of a valid but conflicting Brunch configuration. See the answer to this question from #JohannesFilter.
In essence, it seems that files.joinTo and files.entryPoints are mutually exclusive in that files.entryPoints will override the output of files.joinTo if they overlap. The solution is to choose one or the other, or make sure that they do not overlap on the files they are dealing with. For example, both of these are working configurations:
entryPoints: {
'source/scripts/app.jsx': {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
}
or
joinTo: {
'js/lib.js': /^(?!source\/)/
},
entryPoints: {
'source/scripts/app.jsx': {
'js/app.js': /^source\//
},
}

Related

Warning: true is not a PostCSS plugin

I have an issue while building a project, this error keeps popping up:
Warning: true is not a PostCSS plugin.
This error was not visible before an upgrade was done from node v.10.x.x to v.16.14.x.
Here is the Gruntfile.js task:
grunt.loadNpmTasks('grunt-postcss');
cfg.postcss = {
primary: {
options: {
map: {
inline: false,
annotation: 'web/webroot/_ui/responsive/theme-name/css/'
},
processors: [
require('postcss-inline-svg'),
require('cssnano')({ safe: true }),
require('autoprefixer')
]
},
files: {
'web/webroot/_ui/responsive/theme-name/css/main.css' : ['web/webroot/_ui/responsive/theme-name/css/main.css'],
}
}
Here is the package.json 's devDependencies:
"devDependencies": {
"autoprefixer": "^10.4.4",
"postcss-inline-svg": "^5.0.0",
"cssnano": "^5.1.7",
"grunt": "^1.4.1",
"grunt-available-tasks": "^0.6.3",
"grunt-cli": "^1.2.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-uglify": "^3.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-rtlcss": "^2.0.2",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^3.1.0",
"node-sass": "^7.0.1",
"postcss": "^8.4.12"
}
I tried reverting to an earlier version of autoprefixer, or moving the postcss to a peerDependency, but these possible fixes I found did not work.
Any suggestions would be appreciated!
The problem was related to postcss-inline-svg, there are dependencies not working with node version 16.14 related to node-sass and grunt-sass. So at the moment, removing that plugin is the only solution.

React Native unhandled exeptions are not caught in ErrorUtils & release APK shows blank screen instead of crashing on JS exception

I'm trying to send unhandled exceptions in JavaScript code to Crashlytics. I have added below code to catch any unhandle JavaScript exceptions. However, this code (console.log or Crashlytics event) does not get executed for any error thrown inside a React Component. For example, if I add a throw new ReferenceError() inside the render method of my main component, I see the red error box but nothing happens in terms of my custom error handling.
import { Platform } from 'react-native';
import StackTrace from 'stacktrace-js';
import { Crashlytics } from 'react-native-fabric';
const originalHandler = global.ErrorUtils.getGlobalHandler();
function errorHandler(e, isFatal) {
StackTrace.fromError(e, { offline: true }).then((x) => {
Crashlytics.recordCustomExceptionName(e.message, e.message, x.map(row => (Object.assign({}, row, {
fileName: `${row.fileName}:${row.lineNumber || 0}:${row.columnNumber || 0}`,
}))));
});
console.log('Error caught', e);
// And then re-throw the exception with the original handler
if (originalHandler) {
if (Platform.OS === 'ios') {
originalHandler(e, isFatal);
} else {
// On Android, throwing the original exception immediately results in the
// recordCustomExceptionName() not finishing before the app crashes and therefore not logged
// Add a delay to give it time to log the custom JS exception before crashing the app.
// The user facing effect of this delay is that separate JS errors will appear as separate
// issues in the Crashlytics dashboard.
setTimeout(() => {
originalHandler(e, isFatal);
}, 3000);
}
}
}
global.ErrorUtils.setGlobalHandler(errorHandler);
Also, I noticed that if I bundle the same app as a signed release APK, the app does not crash. Instead, it shows a blank screen. I tried without my custom error handler, still it won't crash. A freshly created React Native app APK crashes in release mode if I throw the exact same error inside a component. Which leads me to think the problem might be with any library I have added. I have included my package.json here. At the moment, the only way I see is to start from a blank project and add each library one-by-one till I see the issue, but it would be a waste of time if the issue was somewhere else. Therefore, appreciate if anyone can give a hint or suggestion for me to pinpoint the root cause.
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest --coverage",
"postinstall": "react-native-schemes-manager all"
},
"xcodeSchemes": {
"Debug": [
"Debug"
],
"Release": [
"Staging"
]
},
"dependencies": {
"axios": "^0.18.0",
"i18next": "^11.3.1",
"lodash": "^4.17.10",
"moment": "^2.22.1",
"react": "16.3.1",
"react-i18next": "^7.6.1",
"react-native": "0.55.3",
"react-native-config": "^0.11.5",
"react-native-elements": "^0.19.1",
"react-native-fabric": "^0.5.1",
"react-native-sensitive-info": "^5.1.0",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^2.0.1",
"react-navigation-redux-helpers": "^1.0.6",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-persist": "^5.9.1",
"redux-persist-sensitive-storage": "^1.0.0",
"redux-saga": "^0.16.0",
"reselect": "^3.0.1",
"stacktrace-js": "^2.0.0"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-flowtype": "^2.46.3",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-react-native": "^3.2.1",
"flow-bin": "^0.71.0",
"jest": "22.4.3",
"react-dom": "^16.3.2",
"react-native-schemes-manager": "^1.0.4",
"react-test-renderer": "16.3.1",
"reactotron-react-native": "^1.14.0",
"reactotron-redux": "^1.13.0",
"reactotron-redux-saga": "^1.13.0",
"redux-devtools-extension": "^2.13.2",
"redux-mock-store": "^1.5.1"
},
"jest": {
"preset": "react-native",
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupFiles": [
"<rootDir>/jest/setup.js"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/jest/assetsTransformer.js"
}
}
}

Moving away from bower in 2.15.1 ember-cli version

I'm trying to stop using bower dependencies in my Ember project. I updated ember-cli to 2.15.1 and moved bower dependencies to package.json. Maybe it will be helpfull to know which dependencies:
"font-awesome": "~4.7.0",
"jquery.inputmask": "
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
We also used bootstrap-datepicker as a bower dependency, but due to the error message I swapped it for ember-bootstrap-datetimepicker hoping that it would solve my issue. I reinstalled node_modules, removed bower_components, cleared tmp and dist folders and run npm cache clean && bower cache clean. From the project, I removed bower.json and .bowerrc. I also explicitly defined in package.json bowerDirectory: null so that in ember-cli-build.js broccoli won't be looking for any bower components.
in my ember-cli-build.js :
const isProductionLikeBuild = ['production', 'staging', 'review', 'e2e-testing'].indexOf(env) > -1;
const app = new EmberApp(defaults, {
fingerprint: {
enabled: isProductionLikeBuild,
prepend: envConf.assetsPrefix
},
sourcemaps: {
enabled: !isProductionLikeBuild
},
minifyCSS: { enabled: isProductionLikeBuild },
minifyJS: { enabled: isProductionLikeBuild },
'ember-cli-babel': {
includePolyfill: true
},
'ember-bootstrap-datetimepicker': {
"importBootstrapCSS": true,
"importBootstrapJS": true,
"importBootstrapTheme": true
},
'ember-font-awesome': { fontsOutput: '/assets/fonts' },
exportConfig: {
environments: [
'production',
'staging',
'review',
'e2e-testing'
]
}
});
When I turn off sourcemaps, app is building correctly.
When I don't however, this is what I get after typing ember s:
The Broccoli Plugin: [BroccoliMergeTrees: TreeMerger (vendor & appJS)] failed with:
Error: ENOENT: no such file or directory, open '/Users/martagajowczyk/Desktop/Project/project-frontend/tmp/source_map_concat-input_base_path-S2ZmmRR0.tmp/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
at Error (native)
at Object.fs.openSync (fs.js:641:18)
at Object.fs.readFileSync (fs.js:509:33)
at SourceMap.addFile (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:75:31)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:200:16
at Array.forEach (native)
at Concat.<anonymous> (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:198:24)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:419:12
at initializePromise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:567:5)
at new Promise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:1039:33)
The broccoli plugin was instantiated at:
at BroccoliMergeTrees.Plugin (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-plugin/index.js:7:31)
at new BroccoliMergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:16:10)
at Function.BroccoliMergeTrees [as _upstreamMergeTrees] (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:10:53)
at mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/merge-trees.js:85:33)
at EmberApp._mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1832:12)
at EmberApp.javascript (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1307:17)
at EmberApp.toArray (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1689:12)
at EmberApp.toTree (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1711:38)
at module.exports (/Users/martagajowczyk/Desktop/Project/project-frontend/ember-cli-build.js:46:14)
at Builder.setupBroccoliBuilder (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/models/builder.js:56:19)
What can be the reason of linking to bower_components?
Thanks
Output from ember version --verbose && npm --version && yarn --version:
ember-cli: 2.15.1
http_parser: 2.7.0
node: 6.10.3
v8: 5.1.281.101
uv: 1.9.1
zlib: 1.2.11
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k
os: darwin x64
3.10.10
0.24.6
Here's part of my package.json with dependencies and dev-dependencies listed:
"devDependencies": {
"broccoli-asset-rev": "^2.5.0",
"ember-ajax": "^3.0.0",
"ember-bootstrap-datetimepicker": "^1.1.0",
"ember-buffered-proxy": "^0.7.0",
"ember-can": "^0.8.4",
"ember-cli": "^2.15.1",
"ember-cli-app-version": "^3.0.0",
"ember-cli-autoprefixer": "0.8.0",
"ember-cli-babel": "^6.8.2",
"ember-cli-bootstrap-datepicker": "^0.5.6",
"ember-cli-code-coverage": "^0.4.1",
"ember-cli-content-security-policy": "1.0.0",
"ember-cli-dependency-checker": "^2.0.1",
"ember-cli-eslint": "^4.2.0",
"ember-cli-htmlbars": "^2.0.3",
"ember-cli-htmlbars-inline-precompile": "^1.0.2",
"ember-cli-inject-live-reload": "^1.6.1",
"ember-cli-mirage": "^0.3.1",
"ember-cli-moment-shim": "^3.5.0",
"ember-cli-page-object": "1.11.0",
"ember-cli-polyfill-io": "^1.2.2",
"ember-cli-qunit": "^4.0.0",
"ember-cli-sass": "^7.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-uglify": "^1.2.0",
"ember-cli-yuidoc": "0.8.8",
"ember-cp-validations": "^3.3.0",
"ember-data": "^2.13.1",
"ember-deep-set": "^0.1.2",
"ember-exex": "^0.1.12",
"ember-export-application-global": "^2.0.0",
"ember-feature-flags": "3.0.0",
"ember-font-awesome": "4.0.0-alpha.3",
"ember-inflector": "^2.0.0",
"ember-inputmask": "0.4.0-beta.5",
"ember-intercom-io": "^0.1.3",
"ember-intl": "^2.23.1",
"ember-intl-cp-validations": "^3.0.1",
"ember-load-initializers": "^1.0.0",
"ember-math-helpers": "^2.0.5",
"ember-modal-dialog": "^2.3.0",
"ember-moment": "7.4.1",
"ember-multiselect-checkboxes": "^0.10.3",
"ember-power-select": "^1.8.2",
"ember-promise-helpers": "^1.0.3",
"ember-radio-button": "1.1.1",
"ember-resolver": "^4.1.0",
"ember-responsive": "2.0.4",
"ember-rl-dropdown": "^0.10.1",
"ember-route-action-helper": "^2.0.3",
"ember-simple-auth": "1.4.0",
"ember-sinon": "1.0.1",
"ember-sinon-qunit": "2.0.0",
"ember-sliding-sticky": "^1.0.0",
"ember-source": "^2.13.0",
"ember-svg-jar": "^0.11.1",
"ember-test-selectors": "0.3.7",
"ember-truth-helpers": "1.3.0",
"ember-uploader": "^1.2.2",
"ember-watson": "^0.9.1",
"eonasdan-bootstrap-datetimepicker": "~4.17.42",
"loader.js": "^4.4.0",
"modal-dialog": "1.6.3",
"yuidoc-ember-theme": "^1.3.0"
},
"dependencies": {
"bootstrap-sass": "^3.3.7",
"broccoli-funnel": "^2.0.1",
"font-awesome": "~4.7.0",
"jquery.inputmask": "3.3.4",
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
}
I strongly assume your problem is ember-cli-bootstrap-datepicker. This addon does add the bootstrap-datepicker bower package during installation and probably should not be used without it.
Personally if you're looking for an ember DatePicker I recommend ember-pikaday.
If you need recommendations about addons I recommend ember observer, or ask in the slack channel references on the community page..

TypeError: Handlebars.template is not a function Handlebars 3.0.3

I'm having an issue with gulp-handlebars returning TypeError: Handlebars.template is not a function. It has been working relatively flawless up until now however it appears to have stopped. Any ideas what I'm missing here?
Looking in the bower folder handlebars is showing as 3.0.3 same as with the node modules folder. Looking at the resulting compiled templates file however all templates appear to be showing "compiler":[6,">= 2.0.0-beta.1"] which I suspect maybe the cause
console.log Handlebars in the browser returns handlebars but the template property is an empty object
My package.json
"devDependencies": {
"handlebars": "^3.0.3",
"gulp": "^3.8.11",
"gulp-clean": "^0.3.1",
"gulp-concat": "^2.5.2",
"gulp-declare": "^0.3.0",
"gulp-handlebars": "^4.0.0",
"gulp-jshint": "^1.9.2",
"gulp-rename": "^1.2.0",
"gulp-sequence": "^0.3.2",
"gulp-uglify": "^1.1.0",
"gulp-watch": "^4.1.1",
"gulp-wrap": "^0.11.0",
"gulp-yuidoc": "^0.1.2"
}
My bower.json
"dependencies": {
"bootstrap": "~3.3.2",
"jquery": "~2.1.3",
"sammy": "~0.7.6",
"showdown": "~0.4.0",
"handlebars": "3.0.3",
"pagedown": "~1.1.0"
},
"devDependencies": {
"jqueryui": "~1.11.4"
}
My gulp tasks
gulp.task('templates', function() {
gulp.src(['public/templates/**/*.hbs', 'public/templates/*.hbs'])
.pipe(handlebars({
handlebars: require('handlebars')
}))
.pipe(wrap('Handlebars.template(<%= contents %>)'))
.pipe(declare({
namespace: 'Handlebars.templates',
noRedeclare: true, // Avoid duplicate declarations
}))
.pipe(concat('templates.js'))
.pipe(gulp.dest('public/js/'));
});
gulp.task('watch', function() {
gulp.watch(['public/templates/*.hbs', 'public/templates/**/*.hbs'], ['templates']);
gulp.watch(['public/js/*.js', 'public/js/**/*.js'], ['build']);
});
Link to Github Issue - https://github.com/lazd/gulp-handlebars/issues/55
Thanks
When concatenating and minifying through gulp make sure your paths are correct. Mine changed and gulp didn't throw any errors about not finding the files!

gulp-load-plugins not loading plugins

gulp-load-plugins is not loading any plugins. Can anyone suggest why this might be?
Node: v0.12.0
NPM: v2.7.3
My package.json:
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0"
}
}
My gulpfile.js:
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
console.log(JSON.stringify(plugins)); // {}
gulp.task('default');
Install other gulp plugins.
tl;dr
If that is your complete package.json, looks like you have no other gulp plugins installed.
Lets say the following is your package.json:
package.json
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0",
"gulp-rename": "^1.2.0",
"gulp-concat": "^2.5.2"
}
}
You $ npm install everything, then...
gulpfile.js
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
// `plugins.rename` should exist
// `plugins.concat` should exist
console.log(JSON.stringify(plugins));
gulp.task('default');
Try setting lazy loading to false.
var gulp = require('gulp');
var plugins= require('gulp-load-plugins')({lazy:false});
console.log(JSON.stringify(plugins));
gulp.task('default');
And as others mentioned, install some plugins.
Let me show you what i have and how i do it , maybe that will help.
My package.json :
{
"dependencies": {
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-html-validator": "0.0.5",
"gulp-image-optimization": "^0.1.3",
"gulp-plumber": "*",
"gulp-rev-collector": "^0.1.4",
"gulp-rev-manifest-replace": "0.0.5",
"gulp-ruby-sass": "*",
"gulp-sass": "*",
"gulp-scss-lint": "^0.1.10",
"gulp-sourcemaps": "*",
"imagemin-optipng": "^4.2.0",
"imagemin-pngquant": "^4.0.0",
"vinyl-paths": "^1.0.0"
},
"devDependencies": {
"del": "^1.1.1",
"gulp-cached": "^1.0.4",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.6",
"gulp-filesize": "0.0.6",
"gulp-gzip": "^1.0.0",
"gulp-htmlhint": "0.0.9",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.2.1",
"gulp-load-plugins": "^0.8.0",
"gulp-rename": "^1.2.0",
"gulp-rev": "^3.0.1",
"gulp-uglify": "^1.1.0",
"gulp-useref": "^1.1.1",
"gulp-webserver": "^0.9.0",
"run-sequence": "^1.0.2"
}
}
How i run gulp-load-plugins :
'use strict';
var gulp = require('gulp'),
$ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/,
lazy: true,
camelize: true
}),
And this is an example of a plugin:
// html optimization
gulp.task('htmloptimize', function () {
return gulp.src(dev.html)
.pipe($.htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(dist.dist))
});
As you can see all my pipes are called .pipe($.plugin()) meaning $ stands for gulp- . If you have a plugin named gulp-name-secondname you call it like this: .pipe($.nameSecondname()) .
Top were i require gulp-load-plugins i have camelize set to true . Lazy loading loads only the plugins you use not all of them .
Careful with gulp-load-plugins because it slows your tasks , for example i run gulp-webserver , when i use it with gulp-load-plugins the task finishes after 200ms versus 20ms if i use it normally. So don't use with everything, play with it see how much performance you lose on each task and prioritize.

Categories

Resources