I am new to gulp and I want to activate gulp watcher feature so as to make changes in css file when saving scss file. I searched this issue a lot and tried all solutions but none of them worked. I'll be glad if anyone helped me with this problem. Thank you.
Here is my code:
var gulp = require("gulp");
gulp.task("hello", function() {
console.log("Hello Zell");
});
var sass = require("gulp-sass");
gulp.task("sass", function() {
return gulp
.src("scss/login360.scss")
.pipe(sass())
.pipe(gulp.dest("styles"));
});
gulp.task("watch", function() {
gulp.watch("app/scss/**/*.scss", ["watch"]);
});
Related
I have the following gulpfile.js:
var gulp = require('gulp'),
babel = require('gulp-babel'),
concat = require('gulp-concat'),
react = require('gulp-react'),
sass = require('gulp-sass'),
jsxToJs = function() {
//gulp.src('src/**/*.js')
gulp.src('./src/sections/header/header.js')
.pipe(react())
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('javascript.js'))
.pipe(gulp.dest('./'));
};
gulp.task('jsxToJs', jsxToJs);
gulp.task('build', ['jsxToJs', 'styles']);
gulp.task('watch', function () {
gulp.watch([
'./src/**/*.js',
'./src/**/*.scss'
], [
'jsxToJs',
'styles'
]);
});
gulp.task('default', ['build', 'watch']);
And I'm trying to compile the following functional React component:
let Header = (props) => {
return(
<div />
);
};
However, when I run the javascript.js file created by gulp I get the following error:
Uncaught TypeError: e.render is not a function
If I convert the component back to the old way of doing things like this (which is how I found it as I'm revisiting an old problem):
var Header = React.createClass({
render: function() {
}
});
Then it works.
Looking at the compiled JS shows me this - where I can see that render is being compiled out correctly with the old syntax, but for the new syntax, while it's being ESfivified it's not being reactified:
// not working
"use strict";
var Header = function Header(props) {
return React.createElement("div", );
};
// working
"use strict";
var Header = React.createClass({ displayName: "Header",
render: function render() {
return React.createElement("div", );
}
});
I've checked that I've installed my gulp requires correctly and I'm using Node 6.10.2. My gulp file has some extra things for scss in that I've removed for this question.
A couple of other points:
I'm not using a bundling tool like browserify as I think it's overkill for this project - so no imports or exports.
I'm just loading HTML pages that do JSONP to an endpoint and load a script on page that includes the JSON - this is done in a getInitialState in the page level HOCs.
Can anyone explain what I'm doing wrong?
The solution turned out to be pretty simple.
Babel requires presets to be provided in order to transpile.
I had the es2015 preset, but not the react one. Therefore react specific tranpilations were not occurring. This addition fixed the problem:
.pipe(react())
.pipe(babel({
presets: ['es2015', 'react']
}))
The mistake I was making, that sent me down the wrong rabbit hole in Google, was assuming that failing to reactify was something to do with the gulp-react function - silly me.
I'm trying to learn about gulp, browserify and react and have been knocking up a little test project. This was fine until I decided to implement some animations in there. Specifically this:
var React = require("react");
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
I'm getting an error because "React.addons" is null.
I also have the issue that my build is taking an age - between 20 secs and a minute. I think the reason is partly because react itself is being included in my bundle, whereas I would ideally like to retrieve it from a CDN (or at least keep it separate).
This is my gulpfile:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('js', function () {
return browserify('./public/js/app.js', {
debug: false, bundleExternal: true
})
.transform(babelify, {"presets": ["es2015", "react"]})
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./build/js/'));
});
If I set "bundleExternal" to false then it does stop react being included in my js - but then nothing works because "react" is not found. I found something about browserify-shims but couldn't get it to work from gulp. And wasn't sure if it was the right way to go?
Apologies for the newbie question!
To include ReactCSSTransitionGroup you need to install it first:
npm install react-addons-css-transition-group
Then just require it:
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
I'm having problems to debug my babel transpiled ES6 in chrome.
I'm building a simple ES6 style angular app:
Main Controller:
class MainController {
constructor($timeout) {
this.timeout = $timeout;
}
onEvento() {
this.timeout(function() {
alert('hello');
},1500);
}
}
MainController.$inject = ['$timeout'];
export default MainController;
app.js:
import MainController from 'controllers/main.js';
angular.module('app', [])
.controller('MainController', MainController);
angular.bootstrap(document, ['app']);
gulp task:
gulp.task("default", ['clean'], function () {
return gulp.src(['www/**/*.js'])
.pipe(sourcemaps.init({identityMap:true}))
.pipe(babel())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("www/dist"));
});
The transpiler works OK, and the code works. Sourcemaps are generated and chrome loads them.
But when I try to put a breakpoint in the constructor of the MainController, Chrome does not allow it. It puts the breakpoint in the line below ("}" in this case).
I can put a brakpoint in the first line of method "onEvento" and works, but I can't put it on the "alert".
I also tried using browserify instead of System.js, and using browserify the breakpoins works perfectly on Firefox, (Firefox does not load sourcemaps when using System.js) but the same problem happens in Chrome.
Did anybody face this problem?
I want to minify my big angular project.
Using angular 1.5.0.
I'm trying to use the module gulp-ng-annotate to do so.
var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
gulp.task('default', function () {
return gulp.src('../www-myalcoholist-com-angular/model/app.js')
.pipe(ngAnnotate())
.pipe(gulp.dest('dist'));
});
when I execute this nodejs script, it fails silently. or... welll.. it doesn't do anything.
i gave it only the main app.js file as a parameter. can I some how give it the all project ?
when I run ng-annotate from terminal, it added annotations properly to my project.. well.. i hope :)
so why this script fails?
I'm new to gulp so any information would be greatly appreciated.
gulp-ng-annotate does not try to find other files in your application. You'll need to either concat your application into a single app.js file before piping to gulp-ng-annotate or src all files separately and pass them to`gulp-ng-annotate.
E.g. the concat method:
var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var concat = require('gulp-concat');
gulp.task('default', function () {
return gulp.src('../www-myalcoholist-com-angular/model/**/*.js')
.pipe(concat('app.js'))
.pipe(ngAnnotate())
.pipe(gulp.dest('dist'));
});
A sample configuration -
gulp.task('app', function() {
return gulp.src([
// './bower_components/angular/angular.min.js',
// './bower_components/angular-sanitize/angular-sanitize.min.js',
//'./bower_components/angular-ui-select/dist/select.min.js',
// './bower_components/angular-ui-router/release/angular-ui-router.min.js',
'./components/**/*.js'])
.pipe(plumber())
.pipe(count('## js-files selected'))
.pipe(concat('./app/all.min.js', {newLine: ';'}))
.pipe(ngAnnotate({
// true helps add where #ngInject is not used. It infers.
// Doesn't work with resolve, so we must be explicit there
add: true
}))
.pipe(gulp.dest('./dist'));
});
This will produce a concatenated build js file. I have kept the vendor js files separate but you can have it any way you like.
P.S - Any other task e.g Linting is done separately in conjunction with watch task.
I'm using gulp to generate a config.js file for angular, then use another gulp task to concat all .js files together, the gulp tasks look like this:
gulp.task('config', function() {
var environment = process.env.NODE_ENV || 'development';
gulp.src('public/config/' + environment + '.json')
.pipe(ngConstant({
name: 'app.config'
}))
.pipe(concat('public/js/config.js'))
.pipe(gulp.dest('.'));
});
gulp.task('js', ['config'], function() {
gulp.src('public/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('public/dist'));
});
gulp.task('default', ['config', 'js']);
If I run gulp locally, everything works file.
But when I push to heroku, using this post install script:
"postinstall": "bower install && gulp"
I can see gulp run successfully, after adding some debug, I can see the config.js file is even created correctly, but the generated app.js does not include config.js. Can anyone suggest what might be wrong here?
UPDATE: I found it works if I do gulp config && gulp js but not gulp, is this because gulp is async and config.js wasn't created when js job started to run? but i thought I have already specified the task dependencies?
The problem is: I'm not returning a stream from tasks, for example the config task should be like this:
gulp.task('config', function() {
var environment = process.env.NODE_ENV || 'development';
var stream = gulp.src('public/config/' + environment + '.json')
.pipe(ngConstant({
name: 'app.config'
}))
.pipe(concat('public/js/config.js'))
.pipe(gulp.dest('.'));
return stream; // THIS IS IMPORTANT!
});