I am new to gulp and want to use it to convert SASS to CSS. I have a src folder which has some scss files deep inside, and I want to mirror it to the public folder but as css files. This it the gulp code
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('src/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('src/**/*.scss',['styles']);
});
but when I run node gulp the program just ends without any error or messages. Shouldn't it stay running to do te file listening (i.e. watch)? Also when I edit a .scss file, it does not create a public folder with the .css file.
Thanks
You need to run gulp no node gulp
You also need to add the styles task in the default one.
gulp.task('watch', function() {
gulp.watch('src/**/*.scss',['styles']);
});
gulp.task('default', ['watch', 'styles'])
Related
I'm currently trying to optimize my website and I would like to know if there is a package that would automatically merge every css file and send only parts that are required for the site.
Is there anything similar to my idea?
You should probably go ahead with Gulp or Grunt , I prefer Gulp and you can follow this way
More details cab be found here https://gulpjs.com/
Create A Gulp Task
Then Execute the task by referring the name (This would create the merged css in the build/css folder)
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');
var concat = require('gulp-concat');
gulp.task('css', function(){
return gulp.src('client/css/*.css')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('default', [ 'css' ]);
I need some help.
I'm looking for a way to generate (or update if the file already exists) a .css file that is a conversion by an .scss file. All of this when compiling.
Explaining this in a better way :
I'm writing some code, everything is ok and I decide to save. Perfect. ctrl+s and the app run perfectly. Nice. Now I've added a style.scss file somewhere (it doesn't really matter the path). How do I "tell" to the compiler that everytime he compile he also has to 'take' this .scss file, convert it in a .css file, and put it in a specific path?
Well, I found a way to do what I needed to do.
I've created my gulpfile.js in this way :
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
gulp.task('styles', function () {
gulp.src('src/app/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['styles']);
});
And added this command to package.json :
"try": "gulp watch && ng s"
the problem is that if in the cli I run the command npm run try it will never start my application, because the watch is an endless stream.
How can I have the watch and the app running both at the same time?
*Edit
Found the solution using concurrently
I want Gulp to load and run a task that is in a different folder.
For example:
files tree:
root
lib
task.js
proj
gulpfile.js
task.js:
var gulp = require('gulp');
gulp.task('myTask', function() {
console.log('done!');
});
and gulpfile.js:
var gulp = require('gulp');
gulp.task('default', ['myTask']);
What I've tried so far:
require('../lib/task.js')
require('require-dir')('../lib/')
In both cases I can see task.js is loaded, but I get the following error:
Task 'myTask' is not in your gulpfile
When task.js is in the proj folder or in a sub folder of it - it works fine,
so I think it has something to do about going up to the parent folder through "../" .
Why is this happening and what can be done?
you can use NodeJS's global or module.exports for this purpose.
http://www.hacksparrow.com/global-variables-in-node-js.html
To make my gulpfile.js easier to read, I put all of my gulp tasks in a gulp/ directory. The only thing I now do in my gulpfile.js is require in the whole directory like this:
var requireDir = require('require-dir');
requireDir('./gulp');
An example task file is `default.js'
gulp.task('default', function() {
// Do stuff here
});
I now use the same gulp stuff in multiple projects, so I create a npm module and packaged all of my gulp tasks into it. When I try to change my gulpfile.js to point at the directory with the same contenxt in node_modules like this:
var requireDir = require('require-dir');
requireDir('./node_modules/my-gulp/gulp');
it doesn't find any of my tasks. It is the same directory as before, so why won't it work? What can I do to pull in multiple gulp tasks in this manner?
I am just trying gulp + angular + browserify app and got a huge browserified file, about 2M. While all it does just require angular and a sample controller.
// setup gulp task
gulp.task('browserify', function() {
gulp.src([util.format('%s/app/main.js', JS_BASE_DIR)])
.pipe(browserify({
insertGlobals: true,
debug: true
}))
// Bundle to a single file
.pipe(concat('bundle.js'))
// Output it to our dist folder
.pipe(gulp.dest(util.format('%s/js/', BUILD_BASE_DIR)));
});
//in the main.js
(function() {
'use strict';
var angular = require('angular');
var indexCtrl = require('./controllers/indexCtrl');
var app = angular.module('wohu.app', []);
app.controller('ctrl', indexCtrl);
})();
angular is installed via
npm install angular
The bundle.js is not minified but it shouldn't be that huge. Wonder what the problem is.
Browserify will include a source map in the bottom of the file which can make it seem HUGE. You can strip this out (and you should) for production. You can use exorcist for this (https://www.npmjs.com/package/exorcist) which pulls the source map into an external file for you and can be hooked up to your build process (I use Grunt but will work for Gulp too).