I installed ionic and cordova.
I created the ionic project
ionic start myapp blank
I added gulp-tsc on my project
npm install gulp-tsc
I edited gulpfile.js at the root of the ionic project :
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var typescript = require('gulp-tsc');
var paths = {
sass: ['./scss/**/*.scss']
typescript: ['./www/scripts/**/*.ts']
};
gulp.task('default', ['sass', 'compile']);
function compileTypeScript(done) {
gulp.src(paths.typescript)
.pipe(typescript({ sourcemap: true, out: 'tslib.js', sourceRoot: '../scripts' }))
.pipe(gulp.dest('./www/js/'))
.on('end', done);
}
gulp.task('compile', compileTypeScript);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
compileTypeScript();
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.typescript, ['compile']);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
I added a simple ts file on www/scripts folder (a class), and when I run ionic serve, tslib.js is not generated. I don't have any error.
What I missed to do to generate the js file from ts files ?
Thanks.
You may try this example:https://github.com/anchann/angularjs-typescript-e2e.
You have to have a separate grunt task running that watches your .ts files and compiles them into the tslib.js.
Some times the dependency does not install in the same, what happens, when you install ionic then typescript automatically install as a dependency,
I suggest you run this command to install manually typescript dependency.
sudo npm install -g typescript
Related
I have a wordpress installation and creating a theme based on a lynda.com tutorial (WordPress: Building Themes from Scratch Using Underscores).
I installed gulp and all the needed stuff to work with scss but the problem is sometimes, changes don't save!
http://prntscr.com/o60i1a
the file is changed and watch is starting but the scss file is not updating.
The problem is sometimes it works when I close cmd or browser!
I read in another question here that you need to add this to sublime:
"atomic_save" : true
I did it, and it worked so changes are now saving okay (I was happy) but this mourning it's not saving again : (
Gulpfile.js:
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'localhost/wp',
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
Given this gulpfile.js:
var gulp = require("gulp"),
sass = require("gulp-sass"),
sourcemaps = require("gulp-sourcemaps"),
autoprefixer = require("gulp-autoprefixer"),
input = "./sass/*.scss",
output = "./assets/style.css";
gulp.task("sass", function() {
return gulp
.src(sassInput)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(output))
.resume();
});
gulp.task("watch", function() {
return (gulp
//watch input folder for change and then run 'sass' task
.watch(input, ["sass"])
.on("change", function(e) {
console.log(
"file" + e.path + " was " + e.type + ", running tasks..."
);
}) );
});
I'm getting the following error --
Error: EEXIST: file already exists, mkdir './assets/style.css'
From what I've found around the web, it seems like gulp is treating the 'style.css' portion of that output folder as a directory itself, or something weird like that, but I can't really figure it out.
There is a tool called gulp-rename built specifically for this purpose. Here's the snippet that I added to make it work properly after adding the npm package.
var gulp = require("gulp");
.
.
.
var rename = require("gulp-rename")
input = "./sass/*.scss",
output = "./assets/";
gulp.task("sass", function() {
return gulp
.src(sassInput)
.
.
.
.pipe(rename("styles.css.liquid"))
.resume();
});
I want to have a watch task that reloads the browser. Below watch works fine for sass compilation but the browser doesn't reload - thoughts?
// Gulp Packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload;
// Default Task
gulp.task('default', ['copyFiles','styles']);
// Copy Files
gulp.task('copyFiles', function() {
gulp.src('./source/*.php').pipe(gulp.dest('./public'));
});
// Compile SASS
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed'
};
gulp.task('styles', function() {
gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./css/'));
});
// Watch Task
gulp.task('watch', function() {
gulp.watch('./scss/includes/**/*.scss', ['styles']);
gulp.watch('./scss/includes/**/*.scss').on('change', browserSync.reload);
});
I would suggest a configuration similar to:
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Source: https://www.browsersync.io/docs/gulp
You need to initialise a Server and watch changes to your SASS and HTML. Then in your sass compile task you need to add .pipe(browserSync.stream()); after the dest command so browserSync can pick up your newly compiled SASS and serve it.
Finally you need to call your serve task with your default task.
Also you can take a look here https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development#using-browsersync-and-sass for another example of Browsersync + Gulp + SASS.
I've recently switched from grunt to gulp, and so far have successfully configured gulp to do what I want. The only problem I'm having is with livereload, I'm finding that I have to save twice in order to see the compiled sass in the browser. Sass seems delayed
Is there a way I can ensure that livereload doesn't execute until sass is compiled? Here's my config:
// Dependencies
var gulp = require('gulp');
var watch = require('watch');
var livereload = require('gulp-livereload');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
onError = function(error){
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "<%= error.message %>",
sound: "Beep"
})(error);
this.emit('end');
};
// Watch
gulp.task('watch', function(){
gulp.watch('src/css/**/*.scss', ['sass']).on('change', livereload.changed);
gulp.watch('src/js/**/*.js', ['concat']).on('change', livereload.changed);
gulp.watch('*').on('change', livereload.changed);
});
// Sass
gulp.task('sass', function(){
gulp.src('src/css/style.scss')
.pipe(plumber({errorHandler: onError}))
.pipe(sass({style: 'expanded'}))
.pipe(prefix('last 4 versions', 'ie 8', 'ie 9'))
.pipe(gulp.dest('src/css/build'))
.pipe(cssmin())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('dist/css'))
});
// Concat
gulp.task('concat', function(){
gulp.src(['src/js/models/*.js', 'src/js/views/*.js', 'src/js/controllers/*.js'])
.pipe(plumber({errorHandler: onError}))
.pipe(concat('main.js'))
.pipe(gulp.dest('src/js/build'))
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('dist/js'))
})
// Default
gulp.task('default', ['watch'], function(){
livereload.listen();
});
Your current watch task is telling gulp to run livereload as soon as one of your sass files changes, instead of waiting for the sass task to complete.
According to the gulp-livereload documentation:
Add .pipe(livereload()) as the last step in your sass task
Remove the livereload.change step from your sass file watch task.
That will ensure the livereload step will always happen last in your sass task, after your css has been compiled.
I'm having a strange problem with Gulp. Here is my Gulp file:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('default', function() {
gulp.run('main');
gulp.watch('sass/*.scss', function() {
gulp.run('main');
})
});
gulp.task('main', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
// .pipe(autoprefixer('last 10 version'))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}))
;
});
The script runs correctly the first time. But on second and subsequent runs of the same script (without Gulp having stopped running), it puts it in the SASS directory as a subitem of the .SCSS file. Any idea why this is happening. I'm not sure how to even debug.
Try the following code.
It uses the correct syntax for gulp, replacing gulp.run() with the supported function arguments.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('main', function() {
return gulp.src('./sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}));
});
gulp.watch('sass/*.scss', ['main']);
gulp.task('default', ['main']);
Found the answer, the gulp.dest keeps the folder structure of gulp.src, to override you can set the base property of the src, this will exclude whatever folder the base is set to
example gulp.src('./sass/' + '**/*.scss', {base: 'sass'}) this now excludes sass from the destination, no longer appending sass to your gulp.dest
See and this look at gulp.src