using fountainjs to generate a new angular project, I have issue in adding bootstrap-sass library to my project.
here is the my generate-project flow: Fountain->angular1->bower->babel->sass
then, since I need to use bootstrap, I installed it using bower, and included it in my index.scss with #import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
It works fine when I run gulp serve but when I build it using gulp build, the following error occured:
Error in plugin 'gulp-cssnano' Message: "bower-components/bootstrap-sass/assets/stylesheets/_bootstrap.scss" is not int the SourceMap
So, what goes wrong here and how to fix that?
I'm not certain of the fix, but a workaround that might help you move along is to comment out or remove the sourcemaps usage in your gulp.conf.js. This will allow your sass to compile, but it won't give you sourcemaps for your style code.
Below is the standard gulp.conf.js with the sourcemaps lines commented out.
const gulp = require('gulp');
const browserSync = require('browser-sync');
//const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const conf = require('../conf/gulp.conf');
gulp.task('styles', styles);
function styles() {
return gulp.src(conf.path.src('index.scss'))
//.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'})).on('error', conf.errorHandler('Sass'))
.pipe(postcss([autoprefixer()])).on('error', conf.errorHandler('Autoprefixer'))
//.pipe(sourcemaps.write())
.pipe(gulp.dest(conf.path.tmp()))
.pipe(browserSync.stream());
}
On line 17 of /gulp_tasks/styles.js, replace this line:
.pipe(sourcemaps.write())
with:
.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
The issue is caused by a bug in gulp-sourcemaps when including files from the node_modules or bower_components folder.
Related
i cant understand why the compiled css file doesn't appear, i checked some videos,but cannot find the mistake,please help,my code is below,also i have pics
let gulp = require ('gulp');
let sass = require ('gulp-sass');
gulp.task('sass', function(){
return gulp.src('app/scss/style.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
here is the pictures
[1]: https://i.stack.imgur.com/sCytp.png
[2]: https://i.stack.imgur.com/SHUIA.png
[3]: https://i.stack.imgur.com/RP1lx.png
[4]: https://i.stack.imgur.com/fGK0h.png
As the error shows in picture 2 you need to set a default sass compiler. Check the documentation for more examples
Install sass. npm install sass
Set default compiler let sass = require('gulp-sass')(require('sass'));
Result:
```
let gulp = require ('gulp');
let sass = require ('gulp-sass')(require('sass'));
gulp.task('sass', function(){
return gulp.src('app/scss/style.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
Task
I am attempting to compile a .scss file that is dependent on other .scss files into a single .css file using gulp.
Where I am
What I am currently working with is a directory similar to the generalized directory below. In the directory below, the global.scss file imports file1.scss, file2.scss, and file3.scss.
sass
|
|-file1.scss
|-file2.scss
|-file3.scss
|-global.scss
What I Was Hoping For
I was hoping that the gulp-sass task I wrote would see the imports and recognize the dependencies that this global.scss file had and compile everything accordingly. Here is the gulp.task I wrote:
gulp.task('global-styling', function() {
gulp.src('src/resources/sass/global.scss')
.pipe(sass().on('error', sass.logError()))
.pipe(gulp.dest('dist/css/global.css'));
});
The Error I Get
This error is thrown because the variables from the files that global.scss is dependent upon never got compiled or even noticed.
events.js:160
throw er; // Unhandled 'error' event
^
Error: src/resources/sass/global.scss
Error: Undefined variable: "$light-font".
on line 110 of src/resources/sass/global.scss
>> color: $light-font;
-----------^
What I Need
If you haven't figured it out by now, I need to figure out how to write a gulp task that will create a single global.css file in my dist folder from the global.scss and its dependencies. Could someone please shed some light on how this is done using gulp.
If you import everything in global.scss you shouldn't any have problems. I see an error in your sass.logError(), it's without (), also to gulp.dest you need to pass a folder path: .pipe(gulp.dest('dist/css/')); and it will create a file called global.css inside dist/css. Here is a working example:
gulpfile.js
const sass = require('gulp-sass');
const gulp = require('gulp');
gulp.task('global-styling', function() {
gulp
.src('./scss/base.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist/css'));
});
scss/global.scss
#import 'var';
body {
background-color: $light-font;
}
scss/var.scss
$light-font: blue;
Output in dist/css/global.css
body {
background-color: blue; }
gulpfile.js EDIT: with gulp-rename
const sass = require('gulp-sass');
const gulp = require('gulp');
const rename = require('gulp-rename');
gulp.task('global-styling', function() {
gulp
.src('./scss/base.scss')
.pipe(sass().on('error', sass.logError))
.pipe(rename('name.css'))
.pipe(gulp.dest('dist/css'));
});
I'm trying to generate a bundle.js file with a Gulp task
var gulp = require('gulp'),
gutil = require('gulp-util'),
wrench = require('wrench'),
conf = require('./webpack.config'),
webpack = require('webpack'),
WebpackDevServer = require('webpack-dev-server');
// Webpack
gulp.task('wp', function() {
return gulp.src('./assets/scripts/entry.js')
.pipe(webpack(conf))
.pipe(gulp.dest('./assets/build1'));
});
However, I get TypeError: dest.on is not a function when I try to run it:
Here's the folder directory:
The error occurs because webpack doesn't work natively with gulp streams. Naturally the returned object by webpack() doesn't include dest.on which is specific to gulp.
Either use gulp-webpack or follow the official docs on how to use webpack with gulp
Sample code taken straight out of the official docs which uses webpack-stream:
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
return gulp.src('src/entry.js')
.pipe(webpack())
.pipe(gulp.dest('dist/'));
});
I'm a Gulp JS beginner. Currently I'm trying to compile some simple less code to CSS. My Gulp task should output a new CSS file for this but after I run the task, nothing happens. I've included the gulp-util module to try to debug the task execution but it doesn't show me any errors.
Here's my Gulp file:
// gulpfile.js
// --- INIT
var gulp = require('gulp'),
util = require('gulp-util'),
less = require('gulp-less'), // compiles less to CSS
minify = require('gulp-minify-css'), // minifies CSS
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'); // minifies JS
// Paths variables
var paths = {
'dev': {
'less': './laravel/public/assets/less/'
},
'assets': {
'css': './laravel/public/assets/css/ ',
'js': './laravel/public/assets/js/',
'vendor': './laravel/public/assets/bower_vendor/'
}
};
// --- TASKS
// Auth CSS
gulp.task('auth.css', function(){
return gulp.src(paths.dev.less + 'auth.less')
.pipe(less().on('error', util.log))
.pipe(gulp.dest(paths.assets.css))
.pipe(minify({keepSpecialComments:0}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.assets.css));
});
// --- WATCH
// --- DEFAULT
gulp.task('default', ['auth.css']);
I'm using Laravel 4. This file lives in the root directory. I have changed the paths but that doesn't seem to work either. Any ideas?
Try removing the extra space at the end of your path.assets.css.
Just fixed. It seems, the path had to be something like: "./public/assets/css/". Now the file has been generated.
I am working with Gulp.js, and I am stumped trying to get gulp-sourcemaps to point all the way back at the original less files, after I do a minification step.
Since gulp-minify-css doesn't support sourcemaps, I am using postcss & csswring.
Ideally, I'd like to end up with:
ss.css (unminified)
ss.css.map (pointing from ss.css back to original .less files)
ss.min.css (minified)
ss.min.css.map (pointing from ss.min.css back to original .less files)
For now, I've stopped trying to output both the minified and non-minified versions, but even getting the minified version to point back to the original .less files doesn't seem to work.
Without doing a minification step, my .map file works great and looks like this:
{"version":3,"sources":["ss.less"],"names":[],"mappings":";AAEA;...
When I do the minification step, it changes the map to point the minified file back at the compiled CSS, not the original Less files:
{"version":3,"sources":["ss-min.css"],"names":[],"mappings":";AAEA;...
Here's my gulpfile.js:
var csswring = require('csswring'),
gulp = require('gulp'),
less = require('gulp-less'),
path = require('path'),
postcss = require('gulp-postcss'),
rename = require('gulp-rename'),
sourcemaps = require('gulp-sourcemaps');
var sourceLess = path.join(__dirname, 'app', 'assets', 'less');
var targetCss = path.join(__dirname, 'app', 'assets', 'css');
// Compile Less to CSS and then Minify, Include Sourcemaps
gulp.task('less-and-minify-css', function () {
return gulp.src(lessFiles)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(rename({suffix: "-min"}))
.pipe(postcss([csswring]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(targetCss));
});
As always, any thoughts appreciated!
I have experimented with using a filter to only rename the generated .css files and nothing else, but that doesn't seem to fix the core issue.
After more fiddling, I was able to get it to work with minification, although I still wasn't able to save the minified and non-minified versions in a single task.
The use of a function for the rename was required because just adding a suffix ends up with the map being named 'file.css.min.map' instead of 'file.min.css.map' which is what's required to get them to match up.
I added the gulpif to save time running the .less files through the csswring command.
gulp.task('less-css-and-minify', function () {
return gulp.src(lessFiles)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(gulpif('**/*.css', postcss([csswring])))
.pipe(rename(function (path) {
if (path.extname === '.map') {
path.basename = path.basename.replace('.css', '.min.css');
}
if (path.extname === '.css') {
path.basename += '.min';
}
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(targetCss));
});