build primeng with gulp failed

UI Components for Angular
takatiko
Posts: 5
Joined: 07 May 2015, 18:47

23 Mar 2016, 18:36

I just try to integrate primeng to my project build with gulp , I followed th primeng-quickStart and did some change to adapte primeng with gulp ..

cagatay.civici
Prime
Posts: 18478
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

23 Mar 2016, 19:47

What is the issue to are having?

mcwebdev
Posts: 68
Joined: 03 Mar 2016, 02:16

24 Mar 2016, 01:46

I am also wondering the best way to tackle this. Can you please share your set up of gulp with a github Gist? I notice if I were to upload my local to my webserver it is 17k files. I imagine the gulp build would reduce this greatly. Unfortunately I have never set up gulp, but do have experience with the tech. Many of my gitSandboxApps have grunt/gulp in place so I can go in and make modifications as needed.

takatiko
Posts: 5
Joined: 07 May 2015, 18:47

24 Mar 2016, 11:04

<html>
<head>
<title>Angular 2 Tester</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="lib/primeui/themes/delta/theme.css" />
<link rel="stylesheet" type="text/css" href="font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="lib/primeui/primeui-ng-all.css" />
<!--<script src="lib/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>-->

<link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="lib/es6-shim/es6-shim.min.js"></script>
<script src="lib/systemjs/dist/system-polyfills.js"></script>
<!--<script src="lib/angular2/es6/dev/src/testing/shims_for_IE.js"></script>-->

<script src="lib/angular2/bundles/angular2-polyfills.js"></script>
<script src="lib/primeng/primeng.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<script src="lib/primeui/primeui-ng-all.js"></script>
<script src="lib/rxjs/bundles/Rx.js"></script>
<script src="lib/angular2/bundles/angular2.dev.js"></script>
<script src="lib/ng2-bootstrap/bundles/ng2-bootstrap.js"></script>

<!--
primeng configuration
<link rel="stylesheet" type="text/css" href="lib/primeui/themes/delta/theme.css" />
<link rel="stylesheet" type="text/css" href="lib/font-awesome-4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="lib/primeui/primeui-ng-all.css" />-->






<!-- 2. Configure SystemJS -->

<script>
System.config({
packages: {

app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
'primeng': 'lib/primeng',
moment: 'lib/moment/moment.js'
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>

<!-- 3. Display the application -->
<body>

<app>Loading...</app>
</body>
</html>

takatiko
Posts: 5
Joined: 07 May 2015, 18:47

24 Mar 2016, 11:06

there is gulb tasks:



var gulp = require("gulp");
var del = require("del");
var tsc = require("gulp-typescript");
var tslint = require('gulp-tslint');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = tsc.createProject("tsconfig.json");

/**
* Remove build directory.
*/
gulp.task('clean', (cb) => {
return del(['dist'], cb);
});

gulp.task('tslint', function() {
return gulp.src('src/**/*.ts')
.pipe(tslint())
.pipe(tslint.report('prose', {
emitError: false
}));
})

/**
* Compile TypeScript sources and create sourcemaps in build directory.
*/
gulp.task("compile", () => {
var tsResult = gulp.src('src/**/*.ts')
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'));
});

/**
* Copy all resources that are not TypeScript files into build directory.
*/
gulp.task("resources", () => {
return gulp.src(["src/**/*", "!src/**/*.ts", '!src/**/*.html', '!src/**/*.css'])
.pipe(gulp.dest("dist"))
});

gulp.task('html', function () {
return gulp.src('src/**/*.html')
.pipe(gulp.dest('dist'));
});

gulp.task('css', function () {
return gulp.src('src/**/*.css')
.pipe(gulp.dest('dist'));
});

/**
* Copy all required libraries into build directory.
'primeui/primeui-ng-all.js',
'primeui/primeui-ng-all.css',
'primeui/themes/delta/theme.css',
'font-awesome-4.5.0/css/font-awesome.min.css',
'primeng/*'
*/
gulp.task("libs", () => {
return gulp.src([
'es6-shim/es6-shim.min.js',
'systemjs/dist/system-polyfills.js',
'angular2/bundles/angular2-polyfills.js',
'systemjs/dist/system.src.js',
'rxjs/bundles/Rx.js',
'angular2/bundles/angular2.dev.js',
'angular2/bundles/router.dev.js',
'ng2-bootstrap/bundles/ng2-bootstrap.js',
'moment/moment.js',
'bootstrap/dist/css/bootstrap.min.css',
'primeui/primeui-ng-all.js',
'primeui/primeui-ng-all.css',
'primeui/themes/delta/theme.css',
'primeng/*'


], {cwd: "node_modules/**"})
.pipe(gulp.dest("dist/lib"));
});

/**
* Build the project.
*/
gulp.task("build", ['compile', 'tslint', 'html', 'css', 'resources', 'libs'], () => {
console.log("Building the project ...")
});

takatiko
Posts: 5
Joined: 07 May 2015, 18:47

24 Mar 2016, 11:09

http://localhost:3000/ng-modules/primeng/primeng Failed to load resource: the server responded with a status of 404 (Not Found)

takatiko
Posts: 5
Joined: 07 May 2015, 18:47

24 Mar 2016, 11:43

the only difference between my project and primeng-quickStart that i have a libs task where i put all my dependencies when i build in dist folder, so with gulb i don't use ng_modules

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

24 Mar 2016, 23:37

At the moment we are not using gulp with primeng.But we have a repo for gulp and webpack usage with primeng-quickstart.
=> https://github.com/Mrtcndkn/primeng-quickstart
We are currently using gulp with primeui if you are interested you can take look at our primeui gulpfile.js
=> https://github.com/primefaces/primeui/b ... ulpfile.js

mcwebdev
Posts: 68
Joined: 03 Mar 2016, 02:16

25 Mar 2016, 20:20

I tried importing the gulpfile.js from the quickstart, that is the package I started out on . When I run GULP it returns this error. I'm not really sure what this del pkg is.

Code: Select all

$ gulp
module.js:327
    throw err;
    ^

Error: Cannot find module 'del'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\projects\webvps\primeng-quickstart\gulpfile.js:2:11)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

mcwebdev
Posts: 68
Joined: 03 Mar 2016, 02:16

25 Mar 2016, 20:34

I looked at the package.json and noticed I needed to update that which resolved the "DEL" error but now I am seeing this.

Code: Select all

npm WARN package.json primeng-quickstart@v1.0.0-SNAPSHOT No repository field.
npm WARN prefer global npm@3.8.3 should be installed with -g
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "npm@latest"
npm ERR! node v4.3.1
npm ERR! npm  v2.14.12
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package es6-shim@0.35.0 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer angular2@2.0.0-beta.9 wants es6-shim@^0.33.3
npm ERR! peerinvalid Peer primeng@0.8.1 wants es6-shim@^0.35.0

npm ERR! Please include the following file with any support request:
npm ERR!     C:\projects\webvps\primeng-quickstart\npm-debug.log

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests