How can I import or include my own javascript file into a gulpfile?
Gulp is installed via npm, so I can include other npm modules like this:
var sass = require('gulp-sass');
So I would like to do something like:
var karmaConfig = require('karma-config.js');
The directory structure is like this:
node_modules/
gulpfile.js
package.json
karma-config.js
so the gulpfile is at the same level as the file that I want to import.
You can do this by:
var karmaConfig = require('./karma-config');
And whatever this file exports can now be accessed from karmaConfig.
hendrikswan is right that you can leave off from the end .js as that's the default. But you don't need to.
The ./ part means that it should be found from the current folder rather than in node_modules. If your structure was like this:
node_modules/
gulpfile.js
package.json
config/karma.js
You would require it thus:
var karmaConfig = require('./config/karma');
Related
I have a directory structure like below:
All ES6 files are in the js directory. Now I want after compiling those files to put all of them into a dist directory but I do not know how can I do that.
I've added a Babel watcher in PhpStorm that has this configuration :
program :
D:\wamp\www\vuejs\node_modules\.bin\babel.cmd
Arguments :
$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
Output path to refresh :
dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
What changes should I make in the watcher configuration?
It can look as follows:
Arguments : $FileName$ --out-dir $ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$ --source-maps --presets env
Output path to refresh : $ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$\$FileNameWithoutExtension$.js:$ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$\$FileNameWithoutExtension$.js.map
Working directory: $FileDir$
Note that Working directory: field is usually hidden, you need to expand Other Options: to see it
I am tired to convert Scss modules to CSS one by one manually. I just want to convert my individual Scss file from many modules. I am using compass watch on command line based compiling CSS through ruby on rails service for compass.
Here you can see how I am managing Scss to CSS conversion through ror cli.
You can create a scss or sass file where you will import all partials.
Example: create a sass file inside your sass directory and name it as you want, maybe app.sass.
Inside app.sass, import all you partials like so: #import 'partials/button-actions'
Create config.rb in the directory where you starting watcher. I prefer to use the project root directory.
Inside config.rb insert:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
# Change paths to yours. css_dir is css output directory, sass_dir is your sass file directory
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "i"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
And start watcher. You will get an app.css file which contains all the code from the imported files as the result. Import it into your HTML.
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);
I have a directory setup like this:
node_modules
src
index.js
I'm trying to copy these to a dist folder like this:
node_modules
index.js
I've tried a number of variations, such as
gulp.src(['src/**/*', 'node_modules/**']).pipe(gulp.dest('dist'));
But this places all of the node_modules in the /dist and not within the node_modules directory.
Any idea how I can do this?
You need to tell gulp.src that the base directory for node_modules/** is . so that the node_modules created at the destination. However, you cannot set the base to . for src/**/* because that would mean that the src directory would be created in your destination. So you need in effect to specify two sets of sources. gulp-add-src can help with this.
Something like this should work:
var addsrc = require("gulp-add-src");
gulp.src('src/**/*')
.pipe(addsrc('node_modules/**', { base: '.'})
.pipe(gulp.dest('dist'));
I'm struggling to get gulp-compass working correctly without using a config.rb file.
Prerequisites:
I don't want to use a config.rb file
I need to use compass (can't just use SASS)
The docs say:
var compass = require('gulp-compass'),
path = require('path');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
project: path.join(__dirname, 'assets'),
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest('app/assets/temp'));
});
But I can't find the following information anywhere:
What path = require('path') does. This doesn't seem to be a gulp-plugin.
What path.join does exactly.
What __dirname is and should it be changed?
If anyone can clear this up it would be much appreciated.
Path is a Node core module. Its join method allow you to join arguments that will construct a normalised path. __dirname refers to the directory of the file in which it is used.
Basically it's simply to refers to the assets directory which is in the same folder as your gulpfile.
By the way, the gulp-ruby-sass plugin has a compass option that you can set to true.