I have a gulpfile.js with a method:
gulp.task('default', function() {...}}
How can I pass data out of gulp so that I can use it in another javascript file?
You can create another module that contains your array and require it in other javascript files:
variables.js
module.exports = {
myArray : ['value1', 'value2']
}
gulpfile.js
var gulp = require('gulp'),
vars = require('./variables');
gulp.task('default', function() {
console.log(vars.myArray);
});
Related
I cant create output.css file in root directory via gulp .. I want output compressed one file with stylesheet, but the gulp doesnt work them.
I have this structure
- bower_components
- bootstrap
- sass
- custom.scss
- output.css
my gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scss', function () {
return gulp.src('bower_components/bootstrap/scss/_custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('output.css'))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('bower_components/bootstrap/scss/_custom.scss', ['scss']);
});
gulp.task('default', ['watch']);
You forgot to include the 'scss' task in your default task.
gulp.task('default', ['scss', 'watch']);
I am trying to run Gulp and save license data like jQuery license info.
Gulp runs fine files are minimized but no license file: This is what I have in my Gulp file.
var gulp = require('gulp'),
saveLicense = ('uglify-save-license'),
uglify = require('gulp-uglify');
gulp.task('default', function () {
gulp.src('scripts/*.js', {
output: {
comments: saveLicense
}
}
).pipe(uglify()).pipe(gulp.dest('publish_folder/scripts'));
console.log('Task Completed');
});
I'm very new to Gulp.
The saveLicense object must be passed to the uglify plugin, not to gulp.src. Try this:
var gulp = require('gulp'),
saveLicense = require('uglify-save-license'),
uglify = require('gulp-uglify');
gulp.task('default', function () {
gulp.src('scripts/*.js')
.pipe(uglify({
output: {
comments: saveLicense
}
}))
.pipe(gulp.dest('publish_folder/scripts'));
console.log('Task Completed');
});
PS: Also I think you make a typo, you forget to write require when loading uglify-save-license plugin.
I have the following gulp file:
var paths = {
all: ['*.js', '**/*.js', 'index.html'],
js: ['*.js', '**/*.js'],
html: 'index.html',
dist: 'dist'
};
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
gulp.src(paths.html)
.pipe(gulp.dest(paths.dist));
return gulp.src(paths.js)
.pipe(babel())
.pipe(gulp.dest(paths.dist));
});
gulp.task('watch', function(){
gulp.watch(paths.all, ['default']);
});
When I run it, I get this error
SyntaxError: d:/project_folder/node_modules/gulp-babel/node_modules/gulp-util/node_modules/beeper/index.js: 'return' outside of function (9:1) ...`
I read somewhere that I shouldn't compile dependencies. I run just gulp with no following flags. So I don't know wehether or not I do compile them. But gulp seems slow because it takes few seconds to get to first task. How to get rid of this error? And am I doing something wrong with dependencies?
Yes, you are currently including all .js files from the current directory, not the source directories. Your application code (lets assume app.js) will "include" your dependencies by using common js requires, such as:
var request = require('request');
In order to actually map the require statements you would want to use a module loader, or packer such as: Browserify or Webpack
The following gulp task will solve the module errors:
var paths = {
all: ['./src**/*.js', 'index.html'],
js: ['./src/**/*.js'],
html: 'index.html',
dist: 'dist'
};
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('default', function () {
gulp.src(paths.html)
.pipe(gulp.dest(paths.dist));
return gulp.src(paths.js)
.pipe(babel())
.pipe(gulp.dest(paths.dist));
});
gulp.task('watch', function(){
gulp.watch(paths.all, ['default']);
});
This only includes all the .js files in the src folder, not **/*.js which will include all *.js files in every folder including node_modules bower_components.
Regarding module loading:
You would probably want to use a loader task to bundle all your client code instead of just copying them to the dist, such as:
gulp.task("webpack", function(callback) {
// run webpack
webpack({
// configuration
}, function(err, stats) {
if(err) throw new gutil.PluginError("webpack", err);
gutil.log("[webpack]", stats.toString({
// output options
}));
callback();
});
});
How do I use gulp to convert all jsx files to JavaScript?
When I try to do so, I get the error undefined function require
I'm using the following script.
What I want to do is use gulp to convert all jsx to JavaScript. Also use browserfy in my jsx files.
var gulp = require('gulp')
var react = require('gulp-react')
gulp.task('transpile-js', function() {
return gulp.src('./src/*.jsx')
.pipe(react({harmony: true}))
.pipe(gulp.dest('./build'))
})
I have jsx files in the src directory. I want to convert them into one JavaScript file and store the result in the build directory
Take a look at my domno repo for more:
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer');
gulp.task('script', function () {
return browserify({
entries : ['the/path/to/the/main/entry/file.js'],
transform: ['babelify']
})
.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest(dir.web));
});
There are several ways of configuring Browserify...
I am a newbie to gulp. I am trying to create one single vendor.css file and vendor.js file with gulp.
The vendor.css should be
-bootstrap.css
The vendor.js should be
-jquery.js
-bootstrap.js
-angular.js
-angular-ui-router.js
gulpfile.js
// Include Gulp
var gulp = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/
});
// Define default destination folder
var dest = 'public';
gulp.task('vendorjs', function(){
var filterJS = plugins.filter('**/*.js');
return gulp.src('./bower.json')
.pipe(plugins.mainBowerFiles( ))
.pipe(filterJS)
.pipe(plugins.concat('vendor.js'))
.pipe(plugins.uglify())
.pipe(filterJS.restore())
.pipe(gulp.dest(dest+"/vendor/js/"));
});
gulp.task('vendorcss', function(){
var filterCSS = plugins.filter('**/*.css');
return gulp.src('./bower.json')
.pipe(plugins.mainBowerFiles( ))
.pipe(filterCSS)
.pipe(plugins.concat('vendor.css'))
.pipe(plugins.uglify())
.pipe(filterCSS.restore())
.pipe(gulp.dest(dest+"/vendor/css/"));
});
gulp.task('default', function() {
// place code for your default task here
});
gulp.task('serve', ['vendorcss','vendorjs'], function () {
});
When i run gulp serve, it executes without error. But I end up with
public/vendor/css/angular/angular.js
public/vendor/css/angular-ui-router/release/angular-ui-router.js
public/vendor/css/bootstrap/dist/js/bootstrap.js
public/vendor/css/bootstrap/less/bootstrap.less
public/vendor/css/jquery/dist/jquery.js
public/vendor/js/vendor.js
public/vendor/js/bootstrap/less/bootstrap.less
Why do my css files are missing. Why do i get less file.
My output should be
public/vendor/vendor.js
public/vendor/vendor.css
How do i map the vendor.js and vendor.css with my html