I am trying to import Semantic UI's Gulp tasks into my own Gulpfile. I want my parent Gulp file to run Semantic's 'gulp build' command, then have my parent Gulp copy the files Semantic's build command outputs to another folder. Everything was moving along until I hit this error:
Error: Task build-javascript is not configured as a task on gulp. If this is a submodule, you may need to use require('run-sequence').use(gulp).
I have a folder /semantic/ which includes all the tasks and everything. And my gulpfile is setup just like Semantic's docs recommend. http://semantic-ui.com/introduction/advanced-usage.html
var watchUI = require('./semantic/tasks/watch'),
buildUI = require('./semantic/tasks/build')
Has anybody else run into this problem? Any help greatly appreciated.
Thanks
There is an open issue on github. But this instructions helped me:
https://github.com/Semantic-Org/Semantic-UI/issues/4374#issuecomment-236729805
Open the file node_modules/semantic-ui/tasks/install.js in your preferred text editor.
On line 26, you should see runSequence = require('run-sequence'),. Please replace it with runSequence = require('run-sequence').use(gulp),
Run in the console cd node_modules/semantic-ui && gulp install.
Related
Problem: I'm learning ES6 through playing around with the code. I found that it's quite annoying to rebuild and restart the server every time I made any changes.
Goal: I want the changes that I saved to be reflected on the browser, without having to manually rebuild, and restart the server. What's the simplest way to do that?
Background:
The current script configuration in the package.json file is as below.
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"start": "http-server -p 9000"
},
I hope this is clear. Thank you!
I believe you must be using gulp tasks to run your project. If so, browser-sync + gulp.watch() is the best option for this. Below is what working for me, add something like below to your gulp task .js file. Whenever you change and save your es6 source code, it will automatically build and refresh the browser.
var gulp = require('gulp');
var browser = require('browser-sync').create();
// your default task goes here that should add "watch-changes" as dependency
// watch changes in js and html files
gulp.task('watch-changes', function() {
browser.init({
// initiate your browser here, refer browser-sync website
});
gulp.watch(
['build/main.bundle.js', 'webapp/**/*.html'],
browser.reload);
});
Check here neat example.
Refer browser-sync website and npm gulp-watch task
I currently have a file structure like this
SASS
gulpfile.js
node_modules
sites
example-site
scss
css
example-site-two
scss
css
example-site-three
scss
css
I have gulp installed in the main parent SASS folder with a task 'sass-all' that can go through every single sites scss folder and compile it into css.
I'm trying to write a new task called 'sass-single' which can be run from any of the example-site folders. So let's say I'm in the folder "example-site-two", I want to be able to cmd and do 'gulp sass-single' and ONLY have it compile the SASS in this site. Same thing for a watch-single task I'd like to setup.
Problem is whenever I run this task from a site folder, it changes my working directory up to the parent SASS folder. I don't want to have 100 different tasks for every different site, I'd prefer to just have one 'sass-single' task thats smart enough to only compile the files from the folder I was in when I ran the script.
current Gulp task attempt
gulp.task('sass-single', function () {
process.chdir('./');
// Where are the SCSS files?
var input = './scss/*.scss';
// Where do you want to save the compiles CSS file?
var output = './css';
return gulp
.src(input)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(output));
});
However this goes back to the main SASS folder and then just does nothing.
How would I go about modifying this to be able to run from any site folder and have it only do it for that site?
If you want to change the current working directory (CWD) back to the directory where you invoked gulp then this won't work:
process.chdir('./');
That's a relative path. Relative paths are relative to the CWD. But by the time you execute process.chdir('./') Gulp has already changed the CWD to the directory where your Gulpfile.js is located. So you're just changing the CWD to ... the CWD.
You could explicitly pass a CWD to gulp on the command line:
SASS/sites/example-site> gulp --cwd .
But that would get annoying pretty quickly.
Luckily for you Gulp stores the original CWD in process.env.INIT_CWD before changing it. So you can use the following in your task to change the CWD back to the original:
process.chdir(process.env.INIT_CWD);
Just getting started with gulp, going through some tutorials. I'm in a mac terminal...
My extremely simple gulpfile:
var gulp = require('gulp');
var scripts = 'scripts/*.js';
gulp.task('copy', function() {
// place code for your default task here
return gulp.src(scripts)
.pipe(gulp.dest('build/js'));
});
I run 'gulp copy' on the command line and get some output that looks like it runs, but no files are copied:
Richards-MBP:gulp-test richardlovejoy$ gulp copy
[19:30:38] Using gulpfile /Work/gulp-test/gulpfile.js
[19:30:38] Starting 'copy'...
[19:30:38] Finished 'copy' after 27 ms
I have 2 js files in the 'scripts' folder.
I originally started with a more complex gulp file which also failed to produce any output.
I inserted gulp-debug but it just shows me that 0 files are in the pipe.
Running the latest version of node (5.2.0) as of this writing.
Tried gulp --verbose but it gives me nothing.
How can I at least see what gulp is doing behind the scenes to debug this?
Thanks
I have an isolated npm module with assets. I want to add gulp to this. Inside the project aside from my assets i have a bash script that downloads and updates my assets. I have been trying to find a way to create a gulp task that can run this script but i have not yet been able to get it to work. I tried the following and although it ran it did not run the script.
gulp.task('update-json', function(){
gulp.src('assets/update_json.sh');
});
I'm trying to run a Gulp task as a Codekit Hook after compiling JS files.
I've created a new Hook and put in the following command:
cd /path/to/my/web/project/
gulp default
I just want to run a gulp task everytime Codekit has compiled my JS files. But nothing happens. What i'm doing wrong?
If i run that task in the terminal, everything is fine.
Thanks for any help.
My solution was to make a Shell Script and link directly to it in the Codekit Hook:
E.g.:
./rungulptasks.sh
Inside the "rungulptasks.sh" file I put a direct link to the local gulp bin:
node_modules/.bin/gulp
Now it works. Solved.
P.S Don't forget to make the script executable.