I am switching my project from grunt to gulp and need to add compass mixin to my code. So I am finding any task in gulp that can do much kind of work that grunt-contrib-compass do in grunt. I got this package compass-mixins but it has dependency to oudated repo of compass. Can anyone please help me out in finding that
Related
While I was learning SASS, I have learned how to install SASS and dev-dependencies using npm package.
Now I want to work on my own project, so how should I work with SASS ?
Do I have to install SASS again ?
If not then how to use existing sass in my project and also the other dependencies like concatenation, auto pre-fixer. Especially when they are updated.
I'm attempting to get Gulp up and running on MacOS 10.12.3. However, no matter what I do, I am getting the following error: No Gulp File Found.
I have done the following:
Installed gulp cli globally via sudo bash. Gulp version as of this writing is 3.9.1
Installed gulp locally via npm install gulp. Gulp version as of this writing is 3.9.1.
I've done the touch gulp command. This has created a 0kb blank gulp file.
I've created a test gulp.js file in my root directory. The code for said file looks likevar gulp = require('gulp');
Any thoughts on what's going on here?!
Your gulp file needs to be called gulpfile.js, not gulp.js.
While you're at it, I also recommend initializing npm by running npm init (it will walk you through it… just use all the defaults for now), and then adding gulp to your package.json by running npm install --save gulp. This will add
"dependencies": {
"gulp": "^3.9.1"
}
to your package.json.
What's the point of this? npm's package.json's "dependencies" becomes a list of all the gulp-related plugins your project needs. Any time you need to recreate the project, all you need is that package.json and you can run npm install to install them.
Note that even after renaming your file, you'll get the error
Task 'default' is not in your gulpfile
At the very least gulpfile.js will have to include the line gulp.task('default');… but if that's all your gulpfile has, you won't actually be doing anything with gulp.
I highly recommend working through css-trick's Gulp for Beginners - it doesn't take long, and you'll come out with a much more complete understanding of how to use gulp.
im looking for a way to see the line errors in sass.
it just keeps telling me:
Warning: Running "sass:server" (sass) task Use --force to continue.
Aborted due to warnings.
but grunt serve --trace doesnt work
neither does a tweak in the Gruntfile
i'm using the yeoman webapp-generator
Long time, but maybe somebody still needs a hint. I could fix it by re-installing sass:
npm install --save-dev grunt-sass
Now the Sass error messages will be more useful and most likely point to the exact error.
I recently moved to Sass in a side project with Gulp. I'm used to LESS development and I'm finding hard to find some tools:
I want to keep a minimum code quality watcher in my project since we are more than one developer writting Sass (not only a linter for syntax errors)
I used to do it with recess for LESS >
https://github.com/twitter/recess
Or in Grunt, a quality code linter for Sass (grunt-scss-lint) >
https://github.com/ahmednuaman/grunt-scss-lint
What I'm trying to do is to set some quality code options like: maximum nesting depth, noIds, using dashes for classes...etc.
Is there any tool in Gulp for code linting?
There was no resources for linting SCSS in gulp yet so, with the help of my colleague Juanfran, we can finally lint our sass code with this gulp-scss-linter
Gulp plugin to validate .scss files with scss-lint
You can use Gulp Sass Lint npm package.
You can also use Sass Lint Auto Fix npm package with the above package which will fixes lint errors.
I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.