I want to ask a question about importing js file into another js file and use it in gulp. You can see my gulp.config file and gulpfile. when i try to run gulp task which is vet i am getting error like this ;
[00:06:21] Using gulpfile ~\pluralsight-gulp-master\gulpfile.js
[00:06:21] Starting 'vet'...
[00:06:21] 'vet' errored after 13 ms
[00:06:21] Error: Invalid glob argument: undefined
at Gulp.src (C:\Users\Altan\pluralsight-gulp-master\node_modules\vinyl-fs\li
b\src\index.js:20:11)
gulp.config.js
module.exports = function(){
var config = {
//all js to vet
alljs: [
'./src/**/*.js',
'./*.js'
]
};
return config;
};
gulpfile.js
var gulp = require ('gulp');
var jscs = require ('gulp-jscs');
var jshint = require ('gulp-jshint');
var util = require ('gulp-util');
var gulpprint = require ('gulp-print').default;
var gulpif = require ('gulp-if');
var args = require ('yargs').argv;
var config= require('./gulp.config');
gulp.task('vet',done=>{
gulp
.src(config.alljs)
.pipe(gulpif(args.verbose,gulpprint()))
.pipe(gulpprint())
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish',{verbose:true}));
done();
});
you are returning a function from gulp.config.js
when you require it, it should be
require('./gulp.config')()
Related
I want to uglify and combine my js files with gulp. Here is my code
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');
var gutil = require('gulp-util');
gutil.env.type = 'production';
gulp.task('uglify', function (cb) {
return gulp.src([
'pure/modernizr.js',
'pure/horizon.js'
])
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("ugly"));
});
var sourcemaps = require("gulp-sourcemaps");
var concat = require("gulp-concat-js");
gulp.task("concat", function () {
return gulp.src([
'ugly/modernizr.js',
'ugly/horizon.js'
])
.pipe(sourcemaps.init())
.pipe(concat({
"target": "concatenated.js", // Name to concatenate to
"entry": "./main.js" // Entrypoint for the application, main module
// The `./` part is important! The path is relative to
// whatever gulp decides is the base-path, in this
// example that is `./lib`
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("pure/"));
});
I end up with some code enclosing my js files from obfuscator stating:
//// THIS FILE IS CONCATENATED WITH gulp-obfuscator-js
When I include this in code, it throws require is not defined, I surf around the web and found one similar question. But that answer is also not clear for me. I believe that I miss some small thing here, since I am new to gulp.
The issue here is I have used gulp-concat-js which obfuscate your js. I should have used gulp-concat. May help someone.
I would like to use gulp to run a custom browserify command whenever a js file (function.js) is modified.
The browserify command that I want to run is;
$ browserify function.js --standalone function > bundle.js
I am using this gulpfile.js as sample.
https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
How do I modify this gulpfile to run the customized browserify command?
'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
// add custom browserify options here
var customOpts = {
entries: ['./src/index.js'],
debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
// add transformations here
// i.e. b.transform(coffeeify);
gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
function bundle() {
return b.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('./dist'));
}
I am using node.js v6.9 on webstorm.
The command you want to run is;
$ browserify function.js --standalone function > bundle.js
Based on this, the modified code is;
// add custom browserify options here
var customOpts = {
entries: ['./function.js'],
standalone: 'function',
};
Simply add one more property to customOpts for the --standalone parameter. The rest of the code remains the same.
code:
var gulp = require('gulp');
var minify = require('gulp-minify');
var rename = require('gulp-rename');
gulp.task('compress', function() {
gulp.src('script-source.js')
.pipe(minify())
.pipe(rename('script1.js'))
.pipe(gulp.dest('.'));
});
in same folder it is creating a new file script1.js but its not compressed, its same copy..
Using gulp-rename could be the choice https://github.com/hparra/gulp-rename
For more detail https://github.com/gulpjs/gulp/issues/34
you forgot to add return statement in your gulp task.
I've successfully got Browserify to compile my JavaScript entry files, but I want to utilise the Remapify plugin so as to not have to specify the full relative path upon requiring a module every time.
For example:
require('components/tabs.js')
Rather than:
require('../../components/tabs/tabs.js').
But I cannot get the shorter module references to map to the corresponding file... "Error: Cannot find module [specified_ref] from [file]".
Have I misconfigured Remapify, or is there something wrong with my wider Browserify setup? I am new to Broswerify and Gulp having previously used Require.js and Grunt. Any help would be greatly appreciated. Please let me know if you need any more information about my setup.
If alternatively you can recommend an alternative Gulp task file that will do all of this, thereby throwing my current task out the window, by all means. I wasn't able to find many Browserify + Remapify examples.
Directory Structure
I have my modules (components) in the following directory: './src/components', so for example: './src/components/tabs/tabs.js'.
I am requiring these modules in a JS file for a given page of the app, which are in: './src/pages', so for example, './src/pages/portfolio/portfolio.js'.
Gulp Browserify Task
var gulp = require('gulp');
var config = require('../config');
var browserify = require('browserify');
var remapify = require('remapify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var browserSync = require('browser-sync');
gulp.task('browserify', function(){
var entries = glob.sync(config.src.pages + '/**/*.js');
return browserify({
entries: entries,
debug: true
})
// (Remapify:)
.plugin(remapify, [{ src: config.src.components + '/**/*.js', expose: 'components', cwd: config.srcDir }])
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest(config.build.js))
.pipe(browserSync.reload({ stream: true }));
});
Page.js
'use strict';
var tabs = require('components/tabs.js'); // (Doesn't work, but I want it to)
// var tabs = require('../../components/tabs/tabs.js'); // (Does work)
Remapify has all sorts of problems. I suggest giving my pathmodify plugin a shot.
For your situation usage would look something like:
var pathmod = require('pathmodify');
// ...
.plugin(pathmod(), {mods: [
pathmod.mod.dir('components', '/path/to/src/components'),
]})
I'm using gulp-sass and I get the following errors:
ESL#eslmbp /Applications/MAMP/htdocs/craigpomranz[master*]$ gulp sass
[17:54:53] Using gulpfile /Applications/MAMP/htdocs/craigpomranz/gulpfile.js
[17:54:53] Starting 'sass'...
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error in plugin 'gulp-sass'
/Applications/MAMP/htdocs/craigpomranz/wp-content/themes/craig/scss/partials/base:13: error: error reading values after 'xsmall'
at opts.error (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/index.js:67:17)
at onError (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/node_modules/node-sass/sass.js:73:16)
Here's my gulpfile.js:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
//var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minify = require('gulp-minify-css');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var theme_path = 'wp-content/themes/craig/';
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(theme_path+'scss/main.scss')
.pipe(sass())
// .pipe(minify({keepBreaks:true}))
.pipe(minify())
//.pipe(rename('style.css'))
.pipe(gulp.dest(theme_path));
});
The same scss (files) compile fine with: sass --watch path/to/main.scss --compressed
I tried with another plugin (gulp-ruby-sass) and it threw a different error.
What am I doing wrong?
Update The error message mentions line 13 in _base.scss. Here is the contents of that file:
//Setting breakpoints
$xsmall : 400px;
$small : 768px; //phones
$medium : 1024px; //tablets
$breakpoints: (
'xsmall' :'(max-width: #{$xsmall})', //<--HERE IS LINE 13
'small': '(max-width: #{$small})',
// 'small': '(min-width: #{$xsmall+1}) and (max-width: #{$small})',
'medium': '(min-width: #{$small+1}) and (max-width: #{$medium})',
'large': '(min-width: #{$medium + 1})'
);
gulp-sass doesn't support maps, try using your commented out gulp-ruby-sass.
What will be supported is lists:
$breakpoint-keys: (
'key_a',
'key_b',
'key_c'
);
$breakpoint-values: (
'value_a',
'value_b',
'value_c'
);
But as you'll see, these are one-dimensional. However maps (new in SASS 3.3.0, 7 March 2014) will allow you to use keys which will let you use the syntax you are currently using:
$breakpoints: (
'key_a' : 'value_a',
'key_b' : 'value_b',
'key_c' : 'value_c'
);
For more information about lists and maps, refer to this article: http://viget.com/extend/sass-maps-are-awesome