I'm trying to setup VueJS components in a Node/Express app, I'm using Gulp with Browserify in order to import the components.
Problem:
My components aren't being exported correctly, after importing them, I try to debug with console.log, like this: import Home from './home.vue'; console.log(Home); and it returns this:
Object
_Ctor: VueComponent(options)
__proto__: Objec
Looking some working example (vue components), it should show method like: template, ready, data, etc in this object.
That's why I think my components are not being exported correctly, and the fact that my page is blank, nothing loads inside <div id="app"></div>.
Here are my setup:
Gulpfile.js:
/**
* Module Dependencies
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
var vueify = require('vueify');
var browserify = require('browserify');
var es = require('event-stream');
var source = require('vinyl-source-stream');
var tap = require('gulp-tap');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');
gulp.task('scripts', function () {
var b = browserify({
entries: 'scripts/store.js',
debug: true,
transform: [vueify, babelify.configure({presets: ["es2015"], plugins: ["add-module-exports"]})]
});
return b.bundle()
.pipe(source('scripts/store-app.js'))
.pipe(buffer())
.on('error', gutil.log)
.pipe(gulp.dest('./public/'));
});
/* Sass task */
gulp.task('sass', function () {
gulp.src('scss/**.scss')
.pipe(plumber())
.pipe(sass({
includePaths: ['scss'].concat()
}))
.pipe(gulp.dest('public/stylesheets'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('public/stylesheets'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
/* Reload task */
gulp.task('bs-reload', function () {
browserSync.reload();
});
/* Prepare Browser-sync for localhost */
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(['css/*.css', 'js/*.js'], {
/*
I like to use a vhost, WAMP guide: https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp, XAMP guide: http://sawmac.com/xampp/virtualhosts/
*/
proxy: 'localhost:3010',
port: 5000,
notify: true,
/* For a static server you would use this: */
//server: {
// baseDir: './public'
//}
});
});
gulp.task('nodemon', function (cb) {
var called = false;
return nodemon({
script: 'app.js',
ignore: [
'gulpfile.js',
'node_modules/'
]
})
.on('start', function () {
if (!called) {
called = true;
cb();
}
})
.on('restart', function () {
setTimeout(function () {
reload({ stream: false });
}, 1000);
});
});
/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['sass', 'browser-sync'], function () {
/* Watch scss, run the sass task on change. */
gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass'])
/* Watch app.js file, run the scripts task on change. */
gulp.watch(['scripts/*.js'], ['scripts'])
/* Watch .html files, run the bs-reload task on change. */
gulp.watch(['*.html'], ['bs-reload']);
});
package.json:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
},
"browserify": {
"transform": [
"vueify",
"babelify",
"browserify-shim"
]
},
"browserify-shim": {
"./js/vendor/jquery.js": "$",
"three": "global:THREE"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"bootstrap": "^4.0.0-alpha.4",
"browser-sync": "^2.17.5",
"gulp": "^3.9.1",
"gulp-browserify": "^0.5.1",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^2.2.0",
"gulp-tap": "^0.1.3",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"tether": "^1.3.7",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"vinyl-transform": "^1.0.0",
"vue": "^1.0.26",
"vue-hot-reload-api": "^2.0.6",
"vue-i18n": "^4.7.1",
"vue-resource": "^0.9.3",
"vue-router": "^0.7.13",
"vueify": "^8.7.0"
},
"dependencies": {
"basic-auth-connect": "^1.0.0",
"browserify": "^13.1.0",
"ejs": "^2.5.1",
"express": "^4.14.0",
"gulp-nodemon": "^2.2.1",
"i18n": "^0.8.3",
"nodemon": "^1.11.0",
"swagger-client": "^2.1.18",
"browserify-shim": "~3.2.0"
}
}
app.js
var Vue = require('vue');
var VueResource = require('vue-resource');
var VueRouter = require('vue-router');
// Components
import Home from '../home.vue';
console.log(Home);
Vue.use(VueRouter);
Vue.use(VueResource);
console.log(Vue);
var router = new VueRouter({
hashbang: true,
// history: true,
transitionOnLoad: true
});
router.map({
'/': { component: Home, name: 'root' }
});
var App = Vue.extend({
});
router.start(App, '#app');
home.vue
<script>
var Header = require('../header.vue');
export default {
data () {
},
ready () {
},
components: {
'app-header': Header
}
}
</script>
<template>
<div>
Home
</div>
</template>
index.html.ejs
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="bundle.js"></script>
</body>
</html>
Notes:
1 - If I change my app.js using a inline component like the example below, it works:
var Foo = {
template: '<p>This is foo!</p>'
}
router.map({
'/': { component: Foo, name: 'root' },
});
More one reason I think the problem is on bundled components. In order to do bundle these components and get this structure to work I'm using some tools like: Browserify, Babel, Vueify, Babelify.
Related
So I'm a big fan of webpack but I have to use only gulp in this work I'm doing and I'm living a nightmare configuring this to actually start working.
On my index.js there is just import Swiper from 'swiper' And this error returns:
Uncaught TypeError: Failed to resolve module specifier "swiper".
Relative references must start with either "/", "./", or "../".
I'm using this configuration in my gulpfile :
const gulp = require('gulp');
const { src, dest, watch, series, parallel } = require('gulp');
const imagemin = require('gulp-imagemin');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const terser = require('gulp-terser');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const browsersync = require('browser-sync').create()
const paths = {
html: {
src: ['./src/**/*.html'],
dest: './dist/',
},
images: {
src: ['./src/images/**/*'],
dest: './dist/content/images/',
},
styles: {
src: ['./src/scss/**/*.scss'],
dest: './dist/css/',
},
scripts: {
src: ['./src/scripts/**/*.js'],
dest: './dist/js/',
},
cachebust: {
src: ['./dist/**/*.html'],
dest: './dist/',
},
};
function copyHtml() {
return src(paths.html.src).pipe(dest(paths.html.dest)).pipe(browsersync.stream())
}
function optimizeImages() {
return src(paths.images.src)
.pipe(imagemin().on('error', (error) => console.log(error)))
.pipe(dest(paths.images.dest))
.pipe(browsersync.stream())
}
function compileStyles() {
return src(paths.styles.src)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(dest('./src/css/'))
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.styles.dest))
.pipe(browsersync.stream())
}
function minifyScripts() {
return src(paths.scripts.src)
.pipe(sourcemaps.init())
.pipe(terser().on('error', (error) => console.log(error)))
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write('.'))
.pipe(concat('bundle.js'))
.pipe(dest(paths.scripts.dest))
.pipe(browsersync.stream())
}
function cacheBust() {
return src(paths.cachebust.src)
.pipe(replace(/cache_bust=\d+/g, 'cache_bust=' + new Date().getTime()))
.pipe(dest(paths.cachebust.dest));
}
function browserSync() {
browsersync.init({
server: {
baseDir: './src'
}
})
}
function watcher() {
watch(paths.html.src, series(copyHtml, cacheBust));
watch(paths.images.src, optimizeImages);
watch(paths.styles.src, parallel(compileStyles, cacheBust));
watch(paths.scripts.src, parallel(minifyScripts, cacheBust));
}
exports.copyHtml = copyHtml;
exports.optimizeImages = optimizeImages;
exports.compileStyles = compileStyles;
exports.minifyScripts = minifyScripts;
exports.cacheBust = cacheBust;
exports.watcher = watcher;
exports.default = series(
parallel(copyHtml, optimizeImages, compileStyles, minifyScripts),
cacheBust,
parallel(watcher, browserSync)
);
My index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script type="module" src="./scripts/index.js"></script>
</body>
</html>
package.json
{
"name": "frontend-challenge-heflerdev",
"version": "1.0.0",
"description": "Pontos importantes antes de iniciar",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp"
},
"repository": {
"type": "git",
"url": "git+https://github.com/HeflerDev/frontend-challenge-junior.git"
},
"author": "HeflerDev",
"license": "MIT",
"bugs": {
"url": "https://github.com/HeflerDev/frontend-challenge-junior/issues"
},
"homepage": "https://github.com/HeflerDev/frontend-challenge-junior#readme",
"devDependencies": {
"autoprefixer": "^10.4.2",
"browser-sync": "^2.27.7",
"cssnano": "^5.1.0",
"eslint": "^8.10.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^7.0.0",
"gulp-postcss": "^9.0.1",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.1.3",
"gulp-sass": "^5.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-terser": "^2.1.0",
"node": "^17.5.0",
"node-sass": "^7.0.1",
"postcss": "^8.4.8",
"sass": "^1.49.9"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"require": "^2.4.20",
"swiper": "^8.0.7"
}
}
EDIT
Some of the folder structure
|dist/
|src/
|scripts
|index.js
|css
|scss
|images
|index.html
I tried a lot of things and I'm just banging my head on the wall, could someone help me?
Since you don't show the actual source file where you're importing swiper, I will assume that it's inside of this file on the client:
<script type="module" src="./scripts/index.js"></script>
From client-side JS files, you can't just do:
import Swiper from 'swiper'
As the error message from the browser says, you have to specify some type of path and you have to make sure your server is then serving the swiper module from that path.
Probably you want to do something like:
import Swiper from '/scripts/swiper'
since you rarely want to use relative paths for serving files on the client. And, then you also have to configure your server to respond to the request for /scripts/swiper to serve the swiper module.
Remember that a nodejs web server does not serve ANY files by default. You have to configure it to serve any file you want to server back to the client. You can often use something like express.static() to serve a whole directory or directory hierarchy of files with one statement, but you have to configure that properly.
UPDATED: 2020.02.13 - Looks like someone else fell through this same problem too - however, no solution. See Github.
A specific set of GulpJS errors are surfacing when trying to build out an Angular 4 Web App with SystemJS.
What's odd is that usually this build script works. There were no edits to the GulpJS or SystemJS file. I'm curious if something in the node/npm ecosystem changes this assumption. At any rate, your thoughts on a fix would be appreciated.
My Windows 10 machine is currently installed with Node version 10.14.0 and npm version of 6.9.0.
When executing npm run build:dev The errors from Gulp show in the terminal as:
Unhandled rejection Error on fetch for app/main.js at file:///C:/Users/Mark/Desktop/Development/Bitbucket/Angular4App/app/main.js
Error: ENOENT: no such file or directory, open 'C:\Users\Mark\Desktop\Development\Bitbucket\Angular4App\app\main.js'
To be clear, the above file being main.js does truly exist in the file system.
Gulp continues, and the remainder of the build completes. But when testing out the final build, the app doesn't load and this asset is missing from the final build:
Noticeably missing from the final build artifact:
app/assets/js/app/app.js
gulpfile.js:
'use strict';
// Install required dependencies for gulp task automation.
var gulp = require('gulp');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var systemjsBuilder = require('gulp-systemjs-builder')
var ts = require('gulp-typescript');
var htmlmin = require('gulp-htmlmin');
/**
* Compile Sass files and keep them in their respective locations.
*/
gulp.task('sass', function () {
console.log('Building Sass files.');
return gulp.src('app/**/*.scss', { base: './' })
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('.'));
});
/**
* Watch Sass files.
*/
gulp.task('sass:watch', function () {
console.log('Watching Sass files.');
gulp.watch('app/**/*.scss', ['sass']);
});
/**
* Compile TypeScript app to JS.
*/
gulp.task('compile:ts', function() {
console.log('Compile TypeScript files into JavaScript files for Angular 4 App.');
var tsProject = ts.createProject('tsconfig.json');
return tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject())
.js.pipe(gulp.dest('app'));
});
/**
* Generate systemjs-based bundle (app/app.js).
*/
gulp.task('bundle:app', function() {
console.log('Generate app.js file for Angular 4 App.');
var builder = systemjsBuilder();
builder.loadConfigSync('./system.config.js');
builder.buildStatic('app', 'app/app.js', {
minify: false,
mangle: false
})
.pipe(gulp.dest('portal/app/assets/js'));
})
/**
* Copy and bundle CSS dependencies into one file, vendors.min.css.
*/
gulp.task('bundle:vendorCSS', function() {
console.log('Copy and bundle dependencies into one file, vendors.css.');
return gulp.src([
'node_modules/bootstrap/dist/css/bootstrap.css',
'node_modules/font-awesome/css/font-awesome.min.css',
'node_modules/bootstrap-social/bootstrap-social.css'
])
.pipe(concat('vendors.min.css'))
.pipe(cleanCSS({
level: {
1: {
specialComments: false
}
}
}))
.pipe(gulp.dest('portal/app/assets/css/vendors'));
});
/**
* Copy and bundle CSS dependencies into one file, app.component.min.css.
*/
gulp.task('bundle:appCSS', function() {
console.log('Copy and bundle dependencies into one file, vendors.css.');
return gulp.src([
'app/assets/css/app.component.css'
])
.pipe(concat('app.component.min.css'))
.pipe(cleanCSS({
level: {
1: {
specialComments: false
}
}
}))
.pipe(gulp.dest('portal/app/assets/css'));
});
/**
* Copy and bundle FONT dependencies into one file, vendors.css.
*/
gulp.task('bundle:vendorFONT', function() {
console.log('Copy font dependencies to Angular 4 App\'s portal directory.');
return gulp.src([
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2*',
'node_modules/font-awesome/fonts/fontawesome-webfont.ttf*',
'node_modules/font-awesome/fonts/fontawesome-webfont.woff*',
'node_modules/font-awesome/fonts/fontawesome-webfont.woff2*'
])
.pipe(gulp.dest('portal/app/assets/css/fonts'));
});
/**
* Copy and bundle JAVASCRIPT dependencies into one file, vendors.js.
*/
gulp.task('bundle:polyfillsJS', function() {
console.log('Copy and bundle dependencies into one file, polyfills.js.');
return gulp.src([
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js'
])
.pipe(concat('polyfills.js'))
.pipe(gulp.dest('portal/app/assets/js/polyfills'));
});
/**
* Copy dependencies loaded from SystemJS into portal directory.
*/
gulp.task('copy:vendorJS', function () {
console.log('Copy 3rd party dependencies loaded from SystemJS to Angular 4 App\'s portal directory.');
return gulp.src([
'#angular/common/**',
'#angular/compiler/**',
'#angular/core/**',
'#angular/forms/**',
'#angular/http/**',
'#angular/platform-browser/**',
'#angular/platform-browser-dynamic/**',
'#angular/router/**',
'#ngx-translate/core/**',
'#ngx-translate/http-loader/**',
'#types/highcharts/**',
'angular2-highcharts/**',
'animate.css/**',
'bootstrap/**',
'bootstrap-daterangepicker/**',
'bootstrap-social/**',
'core-js/**',
'font-awesome/**',
'highcharts/**',
'jquery/**',
'jquery-slimscroll/**',
'lodash/**',
'moment/**',
"ng2-breadcrumb/**",
'ng2-daterangepicker/**',
'ngx-bootstrap/**',
'ngx-infinite-scroll/bundles/**',
'reflect-metadata/**',
'rxjs/**',
'systemjs/**',
'zone.js/**'
], { cwd: 'node_modules/**' }) /* Glob required here. */
.pipe(gulp.dest('portal/app/assets/js/vendors'));
});
/**
* Get the LOWER ENVIRONMENT index.html file to the root of the portal directory.
*/
gulp.task('index-lower', function(){
console.log('Get LOWER ENVIRONMENT index.html file to the root of Angular 4 App\'s portal directory.');
return gulp.src(['static_lower/index.html'])
.pipe(gulp.dest('portal'));
});
/**
* Copy the LOWER ENVIRONMENT app core files to the portal directory.
*/
gulp.task('core-lower', ['index-lower'], function(){
console.log('Copy LOWER ENVIRONMENT core application files to the root of Angular 4 App\'s portal directory.');
return gulp.src(['app/**', '!app/**/*.ts', '!app/**/*.scss'])
.pipe(gulp.dest('portal/app'));
});
/**
* Copy node server to portal directory.
*/
gulp.task('server', function () {
console.log('Copy server files to the root of Angular 4 App\'s portal directory.');
return gulp.src(['index.js', 'package.json'], { cwd: 'server/**' })
.pipe(gulp.dest('portal'));
});
/**
* Perform all LOWER ENVIRONMENT tasks at once.
*/
gulp.task('all-lower', ['sass', 'bundle:app', 'bundle:vendorCSS', 'bundle:appCSS', 'bundle:vendorFONT', 'bundle:polyfillsJS', 'copy:vendorJS', 'compile:ts', 'core-lower', 'index-lower', 'server']);
/**
* Bundle LOWER ENVIRONMENT dependencies and app into one file (app.bundle.js).
*/
gulp.task('bundle-lower', ['all-lower'], function() {
console.log('Copy and bundle LOWER ENVIRONMENT JavaScript dependencies into one file, app.bundle.js then drop it into Angular 4 App\'s portal directory.');
return gulp.src([
'portal/app/assets/js/polyfills/polyfills.js',
'portal/app/assets/js/app/app.js'
])
.pipe(concat('app.bundle.min.js'))
.pipe(uglify())
.pipe(gulp.dest('portal/app/assets/js'));
});
/**
* Minify HTML task.
* (filesToCopy is intentionally an empty array in this StackOverflow Question - you don't need a list of html files do you?)
*/
gulp.task('buildmini', function() {
console.log('Minify portal directory\'s html components.');
var filesToCopy = [
];
return gulp.src(filesToCopy, {base: './'})
.pipe(htmlmin({
collapseWhitespace: true,
caseSensitive: true
}))
.pipe(gulp.dest('./'));
});
/**
* Remove portal directory.
*/
gulp.task('clean', function (cb) {
console.log('Removing /portal directory.');
return del(['portal'], cb);
});
system.config.js:
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app directory
app: 'app',
// angular bundles, inside of node_modules
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/common/http': 'node_modules/#angular/common/bundles/common-http.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries, inside of node_modules
'jquery': 'npm:jquery/dist/jquery.js',
'bootstrap': 'npm:bootstrap/dist/js/bootstrap.min.js',
'#ngx-translate/core': 'npm:#ngx-translate/core/bundles/core.umd.js',
'#ngx-translate/http-loader': 'npm:#ngx-translate/http-loader/bundles/http-loader.umd.js',
'rxjs': 'npm:rxjs',
'ngx-infinite-scroll': 'npm:ngx-infinite-scroll/bundles/ngx-infinite-scroll.umd.js',
'tslib': 'npm:tslib/tslib.js',
// charting frameworks
'angular2-highcharts': 'npm:angular2-highcharts',
'highcharts': 'npm:highcharts',
'highcharts/noData': 'npm:highcharts/modules/no-data-to-display.src.js',
'moment': 'npm:moment/moment.js',
'ngx-bootstrap': 'npm:ngx-bootstrap',
'bootstrap-daterangepicker': 'npm:bootstrap-daterangepicker/daterangepicker.js',
'ng2-breadcrumb': 'npm:ng2-breadcrumb',
'ng2-daterangepicker': 'npm:ng2-daterangepicker'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
highcharts: {
main: './highcharts.js',
defaultExtension: 'js'
},
'angular2-highcharts': {
main: './index.js',
defaultExtension: 'js'
},
'ngx-bootstrap': {
format: 'cjs',
main: 'bundles/ngx-bootstrap.umd.js',
defaultExtension: 'js'
},
'ng2-breadcrumb': {
main: './ng2-breadcrumb.js',
defaultExtension: 'js'
},
'ng2-daterangepicker': {
main: 'index',
defaultExtension: 'js'
}
}
});
})(this);
angular 4 package.json:
{
"name": "angular4-web-app",
"version": "1.0.0",
"author": "Mark",
"description": "Angular 4 Web App on SystemJS",
"homepage": "https://fakehomepage.com",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" \"gulp sass\" \"gulp sass:watch\" ",
"start:dev": "copy \"environment_dev.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"start:qa": "copy \"environment_qa.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"start:prod": "copy \"environment_prod.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"sass": "gulp sass",
"sass:watch": "gulp sass:watch",
"build:dev": "copy \"environment_dev.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-lower",
"build:qa": "copy \"environment_qa.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-lower",
"build:prod": "copy \"environment_prod.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-prod",
"final": "gulp buildmini",
"destroy": "gulp clean"
},
"license": "ISC",
"dependencies": {
"#angular/common": "4.4.7",
"#angular/compiler": "4.4.7",
"#angular/core": "4.4.7",
"#angular/forms": "4.4.7",
"#angular/http": "4.4.7",
"#angular/platform-browser": "4.4.7",
"#angular/platform-browser-dynamic": "4.4.7",
"#angular/router": "4.4.7",
"#ngx-translate/core": "^6.0.1",
"#ngx-translate/http-loader": "0.0.3",
"#types/highcharts": "^4.2.57",
"angular2-highcharts": "^0.5.5",
"animate.css": "^3.5.2",
"bootstrap": "^3.4.1",
"bootstrap-social": "^5.1.1",
"core-js": "^2.4.1",
"font-awesome": "~4.7.0",
"gulp": "^3.9.1",
"gulp-htmlmin": "^5.0.1",
"highcharts": "^5.0.12",
"jquery": "^3.4.1",
"jquery-slimscroll": "^1.3.8",
"lodash": "^4.17.15",
"moment": "^2.18.1",
"ng2-breadcrumb": "^0.5.14",
"ng2-daterangepicker": "^2.0.8",
"ngx-bootstrap": "^2.0.5",
"ngx-infinite-scroll": "^0.5.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.4.2",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"#types/node": "^6.0.60",
"concurrently": "^3.1.0",
"connect-history-api-fallback": "^1.3.0",
"del": "^2.2.2",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-systemjs-builder": "^0.15.0",
"gulp-typescript": "^3.2.1",
"gulp-uglify": "^3.0.0",
"lite-server": "^2.3.0",
"tslint": "^3.7.4",
"typescript": "^2.2.2"
},
"repository": {
"type": "git",
"url": "https://bitbucket.org/mark/angular4-web-app.git"
}
}
Within your config files, such as webpack config or Babel, you will need to use a OS agnostic method of finding files because:
Windows uses \ and everything else uses /
So require Node's built in path module
const path = require('path')
And in your config files use path and __dirname
// "target": "./dist"
"target": path(__dirname, '/dist')
Evidence from webpack:
https://webpack.js.org/configuration/
(Though it's not just webpack that has the issue)
How to make gulp-babel resolve the imports of a js file. Because right now it is running without error in visual studio but the imports are not resolved. Does the source directory of modules to import need to be specified - how to do that in the gulpfile.js?
gulpfile.js
"use strict";
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("js", function () {
return gulp.src('./wwwroot/js/app.js')
.pipe(babel())
. pipe(gulp.dest('./wwwroot/js/babel'));
});
app.js:
import { MDCRipple } from '#material/ripple';
import { MDCTextField } from '#material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
This solved the issue:
https://github.com/babel/babelify/issues/247
In my current understanding the issue was: the dependencies are not being transpiled to a javascript version understandable by browserify.
[What worked]
gulpfile.js:
"use strict";
var gulp = require("gulp");
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
gulp.task("js", function () {
browserify('./wwwroot/js/app.js')
.transform("babelify", {
global: true,
presets: ["es2015", "es2016", "stage-0"],
ignore: /\/node_modules\/underscore/
})
.bundle()
.pipe(source('babel.js'))
.pipe(gulp.dest('./wwwroot/js'));
});
package.json:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"babel-core": "6.26.3",
"gulp": "3.9.1",
"browserify": "15.0.0",
"babelify": "8.0.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-es2016": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"vinyl-source-stream": "2.0.0",
"material-components-web": "0.28.0"
}
}
I'm trying to use vue.js and vue-loader in my Phoenix Framework app with default brunch asset manager. Of course - I can switch to webpack, but I'd like to solve this issue under brunch.
I have following app.js
import App from './App.vue'
new Vue({
el: 'body',
components: { App }
})
App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<p>hot reloading</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
and brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
},
vue: {
extractCSS: true,
out: 'priv/static/css/components.css'
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true,
whitelist: ["phoenix", "phoenix_html", "vue"],
globals: {
Vue: "vue/dist/vue.common.js",
Vuex: "vuex/dist/vuex.min.js",
Axios: "axios/dist/axios.min.js",
VueAxios: "vue-axios/dist/vue-axios.min.js"
},
}
};
and package.json
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"axios": "^0.16.2",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"postcss-brunch": "^2.0.5",
"vue": "^2.3.4",
"vue-axios": "^2.0.2",
"vueify": "^9.4.1",
"vuex": "^2.3.1"
},
"devDependencies": {
"babel-brunch": "~6.0.0",
"brunch": "2.7.4",
"clean-css-brunch": "~2.0.0",
"css-brunch": "~2.0.0",
"javascript-brunch": "~2.0.0",
"uglify-js-brunch": "~2.0.1",
"vue-loader": "^13.0.0"
}
}
but after running phoenix server I see error message in browser's console
app.js:62 Uncaught Error: Cannot find module 'web/static/js/App.vue' from 'web/static/js/app.js'
at require (app.js:62)
at expanded (app.js:34)
at app.js:36
at initModule (app.js:43)
at require (app.js:60)
at app.js:11539
Whats wrong and how to solve this issue? Of course - nothing applied in my browser :(
I have a similar set up, using Phoenix 1.3.
app.js:
import "phoenix_html"
import Vue from 'vue'
import App from "../vue/components/MyApp.vue"
Vue.component('my-app', MyApp);
import Test from "../vue/components/Test.vue"
Vue.component('test', Test);
import axios from 'axios';
var vm = new Vue({
el: '#app',
render: h => h(MyApp)
})
brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["priv/static/css/app.scss"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/assets/static". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor", "vue"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat: {
"fonts": ["node_modules/font-awesome/fonts"] // copy node_modules/font-awesome/fonts/* to priv/static/fonts/
},
sass: {
options: {
includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // tell sass-brunch where to look for files to #import
precision: 8 // minimum precision required by bootstrap
}
},
vue: {
extractCSS: true,
out: '../priv/static/css/components.css'
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true,
globals: { // Bootstrap JavaScript requires both '$', 'jQuery', and Tether in global scope
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether',
bootstrap: 'bootstrap' // require Bootstrap JavaScript globally too
}
}
};
package.json
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"axios": "^0.16.2",
"bootstrap": "^4.0.0-alpha.6",
"eslint-plugin-vue": "^2.1.0",
"font-awesome": "^4.7.0",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"vue": "^2.3.4",
"vue-brunch": "^2.0.1"
},
"devDependencies": {
"babel-brunch": "6.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"brunch": "2.10.7",
"clean-css-brunch": "2.10.0",
"copycat-brunch": "^1.1.0",
"eslint": "^3.19.0",
"eslint-config-airbnb-base": "^11.2.0",
"eslint-plugin-import": "^2.7.0",
"holderjs": "^2.9.4",
"node-sass": "^4.5.3",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "2.1.1"
}
}
I created a directory at assets/vue/components, which is where I put MyApp.vue and Test.vue
If things go right, your JS files should be compiled and be in priv/static/js/app.js
The problem with this setup is you will pull in these components in every page, if you are using a MPA. Brunch's entryPoint (instead of joinTo) looks like it could help with this, but still have problems getting that set up right.
I have 4 html files.
index.html,
menu.html,
dishdetail.html,
contactus.html,
And I am using gulp for testing purposes and live preview. However,the index.html is not concatenated inside the dist folder. All the other folders such as images,styles and scripts are concatenated. So this is how I set up the gulp.
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
ngannotate = require('gulp-ng-annotate'),
browserSync = require('browser-sync'),
del = require('del');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
//Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('app/*.html')
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true,
interlaced:
true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}',
['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: 'dist',
index: 'index.html'
},
reloadDelay: 1000
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
And when I type in cmd gulp,I get this error.
events.js:160
throw er; // Unhandled 'error' event
^
Error: write after end
at writeAfterEnd (C:\Users\Theodosios\Desktop\AngularJs\Week3\03_SPAs\node_m
odules\gulp-minify-css\node_modules\readable-
stream\lib\_stream_writable.js:229:
12)
at Transform.Writable.write (C:\Users\Theodosios\Desktop\AngularJs\Week3\03_
SPAs\node_modules\gulp-minify-css\node_modules\readable-
stream\lib\_stream_writa
ble.js:272:20)
Any ideas why this is happening?
All the modules are instralled through npm. They are shown here
package.json
{
"name": "conFusion",
"private": true,
"devDependencies": {
"browser-sync": "^2.18.8",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-changed": "^2.0.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-minify-css": "^1.2.4",
"gulp-ng-annotate": "^2.0.0",
"gulp-notify": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-uglify": "^2.0.1",
"gulp-usemin": "^0.3.28",
"jshint": "^2.9.4",
"jshint-stylish": "^2.2.1"
},
"engines": {
"node": ">=0.10.0"
}
}
Thanks,
Theo
use gulp-useref plugin
npm install --save-dev gulp-useref
Update gulpfile.js as below
var useref = require('gulp-useref');
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/*.html')
.pipe(useref())
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
There are a couple of possible reasons:
First, gulp-minify-css is deprecated and they recommend using gulp-clean-css, so you should try updating that.
Secondly, gulp-usemin is designed for node >=4.0 and your engines.node is set to >=0.10.0.