Gulp or Webpack on Ionic 2?

chrisbenseler · March 29, 2016, 3:15pm

Does Ionic 2 use gulp or webpack to bundle assets?

I can’t understand what’s happening in a project Iḿ working in. It was working ok with these settings:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9

when I do ionic serve, the assets are built properly by webpack.

Then I started to work on it in another environment (I commited the project to a git repository, then in thje other machine installed the Ionic 2 and dependencies). When I run ionic serve, the assets are not “compiled” Example: app.bundle.js is not created).
Cordova CLI is 6.1.0, Ionic CLI Version is 2.0.0-beta.23 and Ionic App Lib Version is 2.0.0-beta.13.

The weird thing is that if I follow this tutorial http://ionicframework.com/docs/v2/getting-started/tutorial/ a new project works fine, but I noticed that the assets are bundled using gulp.

Am I missing something?

mhartington · March 29, 2016, 4:43pm

So this is part of some changes we’ve talked about before.

We’re moving over to using gulp as the core task runner, and letting users choose how the bundle/compile the code to es5.

chrisbenseler · March 29, 2016, 4:50pm

Oh, thanks!
I’ll update the first environment to the latest version. Is there any doc about how to migrate from webpack to gulp?
Or the best way is to create a new project (based on gulp) and follow it steps?

mhartington · March 29, 2016, 4:52pm

You’re probably better off creating a new project and moving code over. While it’s a bit of a pain (we know, we’re sorry!) it will makes sure that everything is setup correctly.

As all of this stuff gets finalized, this shouldn’t be an issue anymore

chrisbenseler · March 29, 2016, 5:21pm

I created a new project with new CLI and App Lib version, moved the code and everything now is ok.
Thanks for the help.

EuAndreh · March 30, 2016, 6:51am

Hey, @mhartington, I have a small thing to say about Gulp:

When I used Gulp in Ionic1 it worked really well. I just had to add gulp-plumber to every single gulpfile.js.

gulp-plumber prevents gulp from crashing and stop running when an error occurs. Like when you forget to type a color in a .scss file, the gulp process doesn’t stop.

What do you think about adding it to the default gulpfile.js?

mhartington · March 30, 2016, 3:53pm

@EuAndreh so in this case, gulp-plumber is not needed.

github.com

ionic-team/ionic-app-base/blob/master/gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))

This file has been truncated. show original

So here, gulp-sass actually has a method to handle errors, and not crash

EuAndreh · March 30, 2016, 4:09pm

@mhartington hmm, nice tip!

dylanvdm · March 30, 2016, 5:16pm

Please make an official announcement somewhere when things are finalized with what’s changed.

Topic		Replies	Views
WebPack removed and replaced with Gulp ionic-v3	8	3639	April 8, 2016
Not able to bundle typescript in Ionic 2 starter ionic-v3	1	609	June 29, 2016
Ionic 2 beta.9 - Not building app.bundle.js ionic-v3	29	7033	June 27, 2016
ATTENTION: Upcoming Ionic 2 Starter Changes ionic-v3	30	20245	November 10, 2016
Ionic2 Browserify and external TS library ionic-v3	8	2976	April 7, 2016

Gulp or Webpack on Ionic 2?

Related topics