I am using Polymer and reloading changes in files manually. So I tried using using browser-sync and also browser-sync with gulp but not able to succeed.
I tried two following ways :
1) npm scripts in package.json
"scripts": {
"dev": "polymer serve | npm run watch",
"watch": "browser-sync start --proxy localhost:8080 --files 'src/*.html, src/*.js, images/*' "
},
Running it using npm run dev ,it ran but not able to detect the changes in the file.
2) Using gulp with browser-sync
var gulp = require('gulp');
var bs = require('browser-sync').create();
gulp.task('browser-sync', function() {
bs.init({
port : 5000,
proxy: {
target : "localhost:8080"
}
});
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("*.html").on('change', bs.reload);
});
It also ran but not able to detect the changes in *.html file which is present in src folder.
Can anybody help me why changes of files not being detected.
I figured it myself, i was doing one small mistake in npm scripts. I have modified as :
"scripts": {
"dev": "polymer serve --port 8081 | npm run watch",
"test": "polymer test",
"watch": "browser-sync start --proxy localhost:8081 --files \"src/**/*.*, index.html, *.js\""
},
Now it is working fine !!
Related
I'm looking for a way to minify the white space in template literals. Since regular js minification wouldn't remove white space on a template literal I was expecting that maybe polymer-cli had a way to minify those.
An example of the result of minification:
import{PolymerElement,html}from'../node_modules/#polymer/polymer/polymer-element.js';export default class MyApp extends PolymerElement{static get is(){return'my-app'}static get template(){return html`
<style>
:host {
display: block;
height: 100vh;
}
.app {
height: 100vh;
}
</style>
<div class="app">
My App
</div>
`}}customElements.define(MyApp.is,MyApp);
polymer-cli currently doesn't support minification of tagged template strings. Internally, it uses Babel plugins to minify JavaScript, so ideally we'd be able to insert the babel-plugin-minify-template-strings plugin into the pipeline when minification is enabled.
For now, we could use babel-cli along with that plugin to process the build output of polymer-cli:
Start with a Polymer 3 template project, e.g., PolymerLabs/start-polymer3.
git clone https://github.com/PolymerLabs/start-polymer3.git
cd start-polymer3
Install babel-cli and the babel-plugin-minify-template-strings plugin. Your project may need other Babel plugins. In this case, this template project needs babel-plugin-syntax-dynamic-import for Babel to handle the dynamic imports in the code.
yarn add -D babel-cli \
babel-plugin-minify-template-strings \
babel-plugin-syntax-dynamic-import
Add a .babelrc config file with the following file contents:
{
"compact": true,
"ignore": [
"node_modules"
],
"plugins": [
"minify-template-strings",
"syntax-dynamic-import"
]
}
Add a build NPM script to package.json to run babel-cli (with .babelrc above) on the JavaScript output of polymer build:
"scripts": {
"build": "polymer build && $(npm bin)/babel -d . build/**/src/**/*.js"
}
Run npm run build (or yarn build). The command output (running with polymer-cli (1.7.0-pre.13), zsh, macOS High Sierra) should look similar to this:
➜ start-polymer3 git:(master) ✗ yarn build
yarn run v1.3.2
$ polymer build && $(npm bin)/babel -d . build/**/src/**/*.js
info: [cli.command.build] Clearing build/ directory...
info: [cli.build.build] (es6-unbundled) Building...
info: [cli.build.build] (es6-unbundled) Build complete!
build/es6-unbundled/src/lazy-element.js -> build/es6-unbundled/src/lazy-element.js
build/es6-unbundled/src/start-polymer3.js -> build/es6-unbundled/src/start-polymer3.js
✨ Done in 8.66s.
➜ start-polymer3 git:(master) ✗
See GitHub repo with the above changes, and its sample output
Did you try to setup your polymer.json with the following config?:
"builds": [{
"bundle": true,
"js": {"minify": true},
"css": {"minify": true},
"html": {"minify": true}
}],
I'm trying to test out spectron for electron in terms of testing but as I'm going through a tutorial, I keep getting this error message whenever I run npm run test:e2e. My test file syntactically correct but im not sure why i run into an error through compilation
Specs:
Nodejs 6.10.3
Electron 1.6.1
here's the error message
here's the json file package.json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "C:/Users/Livs/Documents/imdc/logger/node_modules/.bin/electron .",
"test:e2e": "C:/Users/Livs/Documents/imdc/logger/test.js"
},
"devDependencies": {
"electron-chromedriver": "^1.7.1",
"electron-prebuilt": "^1.4.13",
"electron-rebuild": "^1.5.11",
"chai": "^3.5.0",
"chai-as-promised": "^5.3.0",
"electron": "^1.3.4",
"mocha": "^3.0.2",
"spectron": "^3.4.0"
}
}
Heres the testing file test.js
const Application = require('spectron').Application;
const path = require('path');
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');
var electronPath = path.join(__dirname, '..', 'node_modules', '.bin', 'electron');
if (process.platform === 'win32') {
electronPath += '.cmd';
}
var appPath = path.join(__dirname, '..');
var app = new Application({
path: electronPath,
args: [appPath]
});
Your npm run e2e just calls the test.js file. You'll need a test runner, mocha for instance. Then you would run mocha test.js. Or change the e2e script inside package.json to run that command.
All your file paths for the scripts inside package.json should be relative to the package root, ie logger/test.js. Regarding the npm bins you only need to type the bin name, ie electron.
To solve your problem you should change your package.json test:e2e command to mocha test.js.
(You can also change your start command to electron . since custom npm commands will always look for binaries in ./node_modules/.bin
As shown in the screen shot below I am not able to run gulp to concat the JavaScript files. Its saying that gulp is not defined.
I have tried the following commands:
npm install -g gulp
npm install gulp
npm install gulp --save-dev
I have also set the environment variables as following:
C:\Users\<user>\AppData\Roaming\npm;C:\Python27;C:\Users\<user>\AppData\Roaming\npm\node_modules;C:\Users\<user>\AppData\Roaming\npm\node_modules\gulp;
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
//script paths
var jsFiles = 'scripts/*.js',
jsDest = 'dist/scripts';
gulp.task('scripts', function() {
return gulp.src(jsFiles)
.pipe(concat('scripts.js'))
.pipe(gulp.dest(jsDest));
});
you just need to install and require gulp locally, you probably only installed it globally
At the command line
cd <project-root> && npm install --save-dev gulp
In your gulpfile.js
var gulp = require('gulp');
this is a different dependency than the command line dependency (that you installed globally). More specifically, it is the same NPM package, but the command line program will execute code usually from a different entry point in the NPM package then what require('X') will return.
If we go to the package.json file in the Gulp project on Github, it will tell the whole story:
{
"name": "gulp",
"description": "The streaming build system",
"version": "3.9.1",
"homepage": "http://gulpjs.com",
"repository": "gulpjs/gulp",
"author": "Fractal <contact#wearefractal.com> (http://wearefractal.com/)",
"tags": [ ],
"files": [
// ...
],
"bin": {
"gulp": "./bin/gulp.js"
},
"man": "gulp.1",
"dependencies": {
// ...
},
"devDependencies": {
// ...
},
"scripts": {
"prepublish": "marked-man --name gulp docs/CLI.md > gulp.1",
"lint": "eslint . && jscs *.js bin/ lib/ test/",
"pretest": "npm run lint",
},
"engines": {
"node": ">= 0.9"
},
"license": "MIT"
}
so at the command line:
$ gulp default
will execute this:
"bin": {
"gulp": "./bin/gulp.js"
},
on the other hand, require('gulp') in your code will return the value of this:
https://github.com/gulpjs/gulp/blob/master/index.js
normally we see this in a package.json file as:
"main": "index.js"
but since this is the default, they just omitted it (which is dumb IMO, better to be explicit, but they aren't the first project I have seen take the lame shorthand route.).
Its occurs on Windows and usually one of the following fixes it:
If you didn't, run npm install gulp on the project folder, even if
you have gulp installed globally.
Normally, It isn't a problem on Windows, but it could be a issue with
the PATH. The package will try to get the PATH from the environment,
but you can override it by adding exec_args to your gulp settings.
For example, on Ubuntu:
"exec_args": {
"path": "/bin:/usr/bin:/usr/local/bin"
}
Hope It will be OK.
Source: https://github.com/NicoSantangelo/sublime-gulp/issues/12
I have my gulp tasks:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('dev/sass/files/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./production/css/'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('dev/sass/files/*.scss',['styles']);
});
which work when run from the console.
I have my tasks.json:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"tasks": [
{
"taskName": "default",
"isBuildCommand": true,
"showOutput": "always",
"isWatching": true
}
]
}
When I run the build task via F1 and the command palette I get:
"Watching build tasks has finished"
The tasks haven't run and my CSS file hasn't been updated.
I have tried/checked:
gulpfile is called gulpfile and in the root of my project
gulp works from the console. Both tasks (default and styles) are listed via gulp --tasks -simple
both tasks can be successfully run from the console
I have reinstalled VSCode - just in case that made any difference. It didn't
Turns out that my ComSpec environment variable was set to (note the semicolon):
C:\WINDOWS\system32\cmd.exe;
To check yours, run this from the command line:
node -p process.env
You can change yours by using control panel and searching for environment variables.
I'd like to copy only modules, which are important for application - those located inside dependencies in package.json. I'd like to omit those under devDependencies.
package.json
{
"dependencies": {
"express": "^4.13.4",
"log4js": "^0.6.33"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-rename": "^1.2.2",
"gulp-typescript": "^2.12.1",
"typings": "^0.7.9",
"yargs": "^4.3.2"
}
}
gulpfile.js
gulp.task('copy_packages', function() {
gulp
.src('node_modules/**/*.*')
.pipe(gulp.dest('../release/node_modules'));
});
Is there any module or a smart way to distinguish which modules belongs to dependencies group and which to devDependencies?
Had the same problem...felt weird this was not considered when gulp was created.
My work around was using child_process to run npm install and specify a directory to put the node_modules directory with only the packages you need for your application.
e.g:
gulp.task('createDeployNodeModulesFolder', function(cb) {
spawn('"npm"', ['install', '--prefix', './dist/', 'package1', 'package2'], {stdio: 'inherit', shell: true}, function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
})
.on('close', cb);
});
In your case you want only the production dependencies so you can likely use:
npm install --prefix /deployDir/ --only=prod
There will be some warnings complaining about no package.json..etc., but those are just warnings. If you really want to get rid of them, I guess you can just add a task to copy or create a package.json into the deploy directory before running npm install.
Node.js allows you to require() JSON files which will be returned as simple JavaScript objects. You can use that to only pass those modules to gulp.src() that appear under dependencies in your package.json file:
var gulp = require('gulp');
var packageJson = require('./package.json');
gulp.task('copy_packages', function() {
var modules = Object.keys(packageJson.dependencies);
var moduleFiles = modules.map(function(module) {
return 'node_modules/' + module + '/**/*.*';
});
return gulp.src(moduleFiles, { base: 'node_modules' })
.pipe(gulp.dest('../release/node_modules'));
});
use distize https://www.npmjs.com/distize .
npx distize --no-files -o {targetpath}