I have create a Gulpfile.js :
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function(){
return browserify('./app/app.js')
.transform(babelify, { stage: 1})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dest'));
});
i have app.js in the app folder and need to apply browserify task on it, the app.js contains this react class
var React = require('react');
var PropTypes = React.PropTypes;
var App = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = App;
when i run this
gulp browserify
it gives me this error :
events.js:72
throw er; // Unhandled 'error' event
^
ReferenceError: [BABEL] E:\learn\react\RMD\public\assets\app\app.js: Using removed Babel 5 option: base.stage - Check ou
t the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets while parsing file: E:\learn\react\RMD\publi
c\assets\app\app.js
at Logger.error
Using removed Babel 5 option: base.stage
.transform(babelify, { stage: 1})
^^^^^
Related
I'm trying to run json-server in a gulp task and I'm checking if the server runs, with the function portInUse.
Like this:
var gulputil = require('gulp-util')
var run = require('gulp-run-command').default
var gulp = require('gulp')
const args = [
'json-server --watch .\\src\\main\\app\\reactjs\\api\\db.json --port 3005'
]
var net = require('net');
var portInUse = function(port, callback) {
var server = net.createServer(function(socket) {
socket.write('Echo server\r\n');
socket.pipe(socket);
});
server.listen(port, '127.0.0.1');
server.on('error', function (e) {
callback(true);
});
server.on('listening', function (e) {
server.close();
callback(false);
});
};
gulp.task("initLocalJsonServer", function() {
portInUse(3005, function(returnValue) {
gulputil.log('1 ' + returnValue);
});
run(args);
portInUse(3005, function(returnValue) {
gulputil.log('2 ' + returnValue);
});
});
That command that is the value of args here, works as intended when I run it in command line, so there's nothing wrong with the command or json-server itself. If I run it, I get to see the json-server at localhost:3005
Now the output from the portInUse function indicates that the server starts, as the output is:
[10:33:56] 1 false
[10:33:56] 2 true
But if I go to localhost:3005 after the gulp tasks are done, I can't see any server running. What might be the reason?
native-country-picker and when I run it I got the error:
undefined is not an object NativeModules.CountryPicker.show
I tried to do these steps:
react-native upgrade
rnpm link
(after the plugin install)
and same error.
this is the country picker plugin
https://github.com/tofugear/react-native-country-picker
This is the code of the plugin:
'use strict';
import { NativeModules } from 'react-native';
var RNCountryPicker= NativeModules.CountryPicker;
var CountryPicker = {};
CountryPicker.show = function (callBack) {
NativeModules.CountryPicker.show(callBack);
};
CountryPicker.hide = function () {
RNCountryPicker.hide();
};
module.exports = CountryPicker;
And the error in the line:
NativeModules.CountryPicker.show(callBack);
undefined is not an object (evaluating '_reactNative.NativeModules.CountryPicker.show')
Every few times I edit my _vars.scss file, gulp-sass watch will throw the error
Error in plugin 'sass'
Message:
sass\stylesheet.scss
Error: File to import not found or unreadable: vars
Parent style sheet: stdin
on line 10 of stdin
>> #import 'vars';
^
I can get it to compile again if I comment out the line
#import 'vars';
Here is my code
stylesheet.scss
//Settings
#import 'colors';
#import 'vars';
//External libs
#import 'font-awesome';
#import 'susy';
#import 'breakpoint';
//Global and default styles
#import 'global';
//sections
#import 'styles/header';
#import 'styles/main';
#import 'styles/footer';
_vars.scss
$font-heading: 'Oswald', sans-serif;
$font-paragraph: 'Raleway', sans-serif;
// Padding
$spacing: 5px;
#function spacing($size){
#return $spacing * $size;
}
$footer-height: spacing(10);
$susy: (
columns: 12,
gutters: 1 / 4,
// debug: (image: show)
);
Gulpfile,js
var gulp = require('gulp');
var util = require('gulp-util');
var replace = require('gulp-replace');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var inclPaths = require('sass-include-paths');
var sourcemaps = require('gulp-sourcemaps');
var bower = require('gulp-bower');
var stylePaths = {
sass: './sass/**/*.scss',
css: './css'
}
var sassIncludes = []
.concat(inclPaths.bowerComponentsSync());
var sassOptions = {
style: 'expanded',
includePaths: sassIncludes
}
var bowerDir = './bower_components';
var faPaths = {
src: bowerDir + '/font-awesome/fonts/**.*',
dest: 'fonts',
}
var vendorJS = {
base: bowerDir,
scripts: [bowerDir + '/jquery/dist/jquery.js'],
dest: './js/vendor'
}
gulp.task('sass', function(){
return gulp
.src(stylePaths.sass)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(stylePaths.css))
.pipe(browserSync.stream({match: '**/*.css'}));
});
gulp.task('watch', ['sass'], function(){
browserSync.init({
proxy: 'mysite.local'
});
gulp.watch(stylePaths.sass, ['sass']);
gulp.watch('./*.html').on('change', browserSync.reload);
});
gulp.task('bower', function(){
return bower()
.pipe(gulp.dest(bowerDir));
});
gulp.task('faFonts', function(){
return gulp.src(faPaths.src)
.pipe(gulp.dest(faPaths.dest));
});
gulp.task('vendorScripts', function(){
return gulp.src(vendorJS.scripts, {base: vendorJS.base})
.pipe(gulp.dest(vendorJS.dest));
})
gulp.task('default', ['watch']);
I have been reading a lot about this error, and it is usually because of sublime text and using a windows machine. If you already have those settings you have to go into sublime preferences, then "Settings - User" and add another option "atomic_save": true. You can research more about this as there are tons of persons having this issue.
Code of Settings - User:
{
"color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme",
"font_size": 9,
"atomic_save": true
}
Regards.
I am just trying to set up PostCSS and integrate it into my recent workflow. But somehow I don't seem to get it work.
I am using A Mac and gulp as a task runner.
This is the erro I get when starting my watch task:
TypeError: $.postcss is not a function
And this is what my gulpfile.js looks like:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({
rename: {
'browser-sync': 'browserSync',
'gulp-postcss': 'postcss',
},
pattern: ['gulp-*', 'gulp.*', 'del', 'run-sequence', 'browser-sync'],
DEBUG: false
});
var targetPath = 'dist';
var useBrowserSync = $.util.env.browserSync || true;
gulp.task('sass', function(){
return gulp.src('src/scss/*.{scss,sass,css}')
.pipe($.postcss([
require('precss')()
], {syntax: require('postcss-scss')}))
.pipe(gulp.dest(targetPath + '/public/assets/css'))
.pipe( $.if( useBrowserSync , $.browserSync.stream() ) );
});
gulp.task('watch', ['sass'], function(){
if( useBrowserSync ){
$.browserSync.create();
$.browserSync.init({
proxy: 'localhost/my_project/dist/public/'
});
}
gulp.watch('src/scss/*.{scss,sass,css}', ['sass']);
});
What is going wrong?
I'm kinda new to ionic and gulp.
I was able to configure the ionic.project file in order to run the gulp tasks when I first run ionic serve.
But now when I change files I want that the gulp task will run again.. But this doesn't happen.. Is there a way to do that?
This is my ionic.project file:
{
"name": "test",
"app_id": "",
"gulpStartupTasks": [
"default"
],
"watchPatterns": [
"src/**/*",
"src/*",
"www/**/*",
"!www/lib/**/*"
]
}
I expected that when some file changes that match the wtachPatterns
it will invoke the gulp watch task, but this doesnt happen (I see that ionic see that the file has changed but nothing happen.)
this the the gulp watch task:
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.script, ['script']);
});
Basically the task is minifying all the JS files and all the sass/scss files
and the index.html is looking on the minified files. so if the gulp task isn't invoked there are no changes in the minified file and I need to run ionic serve all over again.. Is there a proper way to do that?
UPDATE:
This is the complete gulpfile
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
require('require-dir')('./gulp/tasks');
var paths = {
sass: ['./scss/**/*.scss'],
style: ['./src/**/*.scss'],
script: ['./src/app.js'],
html:['./src/*.html']
};
gulp.task('default', ['sass', 'script','watch', 'html', 'style']);
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.script, ['script']);
});
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();
});
And this is an example of one of the files who have the actual task:
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var stringify = require('stringify');
var paths = ['./src/app.js'];
gulp.task('script', function() {
return browserify(paths, {debug: true})
.transform(stringify(['.html']))
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./www/js'));
});
Well So the problem was with paths I watched.
I removed the ./ and now its working
First thing first, you misunderstand the watchPatterns is for livereload, which means, the web will refresh if there is any file changed on watch. It's definitely not having any relation to gulp.
Read more at: http://ionicframework.com/docs/cli/test.html
To watch for file changes with watch, update your watch task, which is
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']); <-- any file in paths.sass changed will trigger `gulp sass`
gulp.watch(paths.script, ['script']); <-- any file in paths.script changed will trigger `gulp script`
});
So if you want to watch more files to be processed by Gulp, just add tasks and watch them in gulp watch.
Oh hey, you are watching only files in ./scss/**/*.scss and ./src/app.js. Add more if you wish.