I want to iterate through all of my bower packages. All of them that have sass files as their main files, I want to include in the includePaths for gulp-sass.
I'm using the npm package main-bower-files to successfully get me the main files (and I filter down to just the scss files).
But when I go to compile, I get the following error (because right now bootstrap is the only one I have):
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: file to import not found or unreadable: bootstrap
The relevant part of my gulpfile is
var load_paths = bower({
base: path.join(__dirname, "bower_components"),
filter: '**/_*.scss'
});
gulp.src(app_css_file)
.pipe(sass({
includePaths: load_paths
}))
.pipe(concat('app.css'))
.pipe(gulp.dest('build/css'));
My problem turned out to be that main-bower-files gives you the files, not the directories. Duh. Node-sass needs the directory containing the importable files.
So I have to modify my load_paths a little bit.
for (var i=0; i<load_paths.length; i++){
// we need to use the parent directories of the main files, not the files themselves
// so ./bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss
// becomes ./bower_components/bootstrap-sass-official/assets/stylesheets
load_paths[i] = path.dirname(load_paths[i]);
}
And that fixed it. Hope this helps someone else :)
Related
I recently installed gulp 4 [from 3.9.1] and I'm having an issue getting my globs to work as they used to.
I have a whole directory [less some other sub-directories and files] that I want to transfer.
Here's the relevant code:
var path_in_str = 'my_input_dir/';
var path_out_str = 'my_output_dir/';
return gulp.src([path_in_str+'**', path_in_str+'.*', '!'+path_in_str+'node_modules', '!'+path_in_str+'node_modules/**', '!'+path_in_str+'*.json'], {dot: true})
.pipe(gulp.dest(path_out_str));
Basically, I'm trying to prevent the node_modules folder from being transferred, and I also want to prevent all .json files in the home folder from being transferred as well.
What is happening is that the node_modules directory only [no content] is being transferred. Also, all the .json files are being transferred.
How can I tweak this to fix for Gulp 4's way of handling globs [as it appears to have changed slightly]?
I couldn't get this to work with native gulp, so I thought I'd try the node glob package, and this option seems to work best for the use-case.
First you would need to install it like so:
npm install glob --save-dev
Then reference it in your gulp gile:
var gp_glob = require('glob');
And finally, use it as the glob filter:
var input_list_arr = gp_glob.sync(path_in_str+'**', {ignore: [path_in_str+'node_modules/**', path_in_str+'*.json'], dot: true});
return gulp.src(input_list_arr, {base: path_in_str})
.pipe(gulp.dest(path_out_str));
Take note that we're using the ignore option instead of ! notation to filter the file/directory paths. Also note that the base option is specified when passing the filtered list into gulp.src.
This worked for me as intended. Hope it helps.
I am a newcomer to Gulp. I have a gulp file and I am running one task in it -
gulp.task('sass', function () {
return gulp.src('app/scss/**/.scss') // Get source files with gulp.src
.pipe(sass()) // Sends it through a gulp plugin
.pipe(gulp.dest('app/css')) // Outputs the file in the destination folder
});
in the above code what i want to do is:
I have four scss files in app/scss folder:
site1.scss
site2.scss
site3.scss
copy.scss
Now i want to run the sass task and have all the files in scss folder excuding one particular file 'copy.scss'. I don't want the 'copy.scss' file to be converted into css file.
How do I do it?
Any help would be apprecisted
Try
return gulp.src(['app/scss/**/*.scss', '!app/scss/**/copy.scss'])
Note the ! It allows you to negate or remove from the stream a file or files. Also note I added a * to your *.scss
I am trying to compile ES6 to a file using Webpack and can't figure out why the code is not usable as it is.
Side note : This is meant to be a plugin for VueJS
I start with a simple file that exports a single function such as
exports.install = () => {
...
}
Webpack uses babel-loader and babel-preset-es2015 to compile it.
You may find webpack config, source and compiled files in this gist.
My problem is the result is not "requirable" in my Vue app... It has some weird stuff around the core needed exports.install statement. When I remove all this stuff and leave just exports.install = ... it is OK, otherwise I just don't get anything out of it.
I am using it in another app built with webpack, through an import statement.
Without an output.libraryTarget option, webpack will generate a bundle you can include via a <script> tag, but not import. I think this is what you're seeing.
If you want to import (or require) the result of your webpack build, you should set libraryTarget to commonjs2
output: {
filename: 'index.js',
libraryTarget: "commonjs2"
},
With this libraryTarget configuration, the webpack output will look like module.exports = /* ... the "weird stuff" */, so when you import it, you'll get the exported function you expect.
If all you're doing is compiling a single file or set of files that will be imported in another webpack build, you might consider not using webpack at all, and instead using the Babel CLI directly. In your Gist, you're not getting anything from webpack other than wrapping your module in some extra webpack bootstrap code.
All:
I am pretty to new to Gulp and Browserify, what I did is transpile some jsx code and browserify them into a bundle.js file.
var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var reactify = require("reactify");
gulp.task("default", function(){
browserify({
entries: ["js/app.js"],
debug: true
})
.transform(reactify)
.bundle()
.pipe(source("bundle.js"))
.pipe(gulp.dest("dist/js/"));
});
In app.js, I specify a few require dependencies(each one may require some other file), and I thought browserify will parse them and compile into a single bundle.js file, but when I run it, even I only include bundle.js in index.html page, it still includes all those dependency files when I check in Chrome source tab, I wonder if this is just Chrome's feature to parse bundle file which gives me a list of dependency file list or it actually download those dependency files as well( My confuse is I actually can click and open those dependency files, so I guess Chrome download them all with bundle.js, but I am not sure about that)?
Thanks
If I understand you correctly, you are describing what debug: true in browserify gives you, aka source maps.
--debug -d Enable source maps that allow you to debug your files separately.
and
When opts.debug is true, add a source map inline to the end of the
bundle. This makes debugging easier because you can see all the
original files if you are in a modern enough browser.
I just started playing with gulp, and it's very fast and easy to use but it seems to have a critical flaw: what do you do when a task needs to output more than one type of file?
For example, gulp-less says it doesn't even support the sourceMapFilename option. I don't want my source map embedded in my CSS file. Am I hooped? Should I just go back to using Grunt, or is there a way to deal with this?
This task will take multiple files, do stuff to them, and output them along with source maps.
It will include the source code within the maps files by default, so you don't have to distribute the source code files too. This can be turned off by setting the includeContent option to false. See the gulp-sourcemaps NPM page for more source map options.
gulpfile.js:
var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();
gulp.task("test-multiple", function() {
return gulp.src("src/*.scss")
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass())
.pipe(plugins.autoprefixer())
.pipe(plugins.sourcemaps.write("./"))
.pipe(gulp.dest("result"));
});
package.json
"gulp": "~3.8.6",
"gulp-load-plugins": "~0.5.3",
"gulp-sass": "~0.7.2",
"gulp-autoprefixer": "~0.0.8",
"gulp-sourcemaps": "~1.1.0"
The src directory:
first.scss
second.scss
The result directory after running the test-multiple task:
first.css
first.css.map // includes first.scss
second.css
second.css.map // includes second.scss
Gulp supports multiple output files fine. Please read the docs.
Example:
gulp.task('scripts', function () {
return gulp.src('app/*js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
This will read in a bunch of JS files, minify them and output them to the dist folder.
As for the gulp-less issue. You could comment on the relevant ticket.
In the docs it shows you how to have multiple output files:
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())`
.pipe(gulp.dest('./build/minified_templates'));