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' ]);
Related
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'])
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'm trying to browserify some angular files and integrate them into my gulp tasks. While trying to get the gulp plugin for browserify I came across this https://github.com/gulpjs/plugins/issues/47
Browserify should be used as a standalone module. It returns a stream and figures out your dependency graph. If you need vinyl objects, use browserify + vinyl-source-stream
I'm ashamed to say that I didn't know what vinyl objects were and after reading up a bit I came across this.
Vinyl is a very simple metadata object that describes a file.
And apparently you need vinyl adapters to expose .src, .watch and .dest? So, I'm guessing vinyl-source-stream is that sort of adapter? I guess what I don't understand is why would I need vinyl object in my browserify when I can simply do this:-
var gulp = require('gulp'),
browserify = require('browserify');
gulp.task('browserify', function(){
browserify('./js/index.js')
.bundle()
.pipe(gulp.dest('./js/bundle.js'));
And instead have to do this:-
var gulp = require('gulp'),
source = require('vinyl-source-stream'),
browserify = require('browserify');
gulp.task('browserify', function(){
browserify('./js/index.js')
.bundle()
.pipe(source('./js/index.js')) //this line in particular
.pipe(gulp.dest('./js/bundle.js'));
Apologize if this doesn't make sense. I'll edit this if it needs more explanation.
You can't just pipe to the string './js/bundle.js'. You use source to attach a name to the new file created by bundle, then you pipe the stream of file(s) to it's destination directory:
var gulp = require('gulp'),
source = require('vinyl-source-stream'),
browserify = require('browserify');
gulp.task('browserify', function(){
return browserify('./js/index.js')
.bundle()
.pipe(source('bundle.js')) //this line in particular
.pipe(gulp.dest('./js'));
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).
I want to create and run grunt task in node.js code for test use.
var foo = function() {
var grunt = require("grunt");
var options = {"blahblah": null} // ...creating dynamic grunt options, such as concat and jshint
grunt.initConfig(options);
grunt.registerTask('default', [/*grunt subtasks*/]);
}
But this doesn't work. Grunt doesn't seem to run any task. I'm almost sure that there is some API to run grunt task externally without command line, but don't know how to do it.
Is there any way to do it?
You can. I don't know why anyone would need to do this as currently Grunt is a command line tool. WARNING: I don't recommend running Grunt in this way. But here it is:
var grunt = require('grunt');
// hack to avoid loading a Gruntfile
// You can skip this and just use a Gruntfile instead
grunt.task.init = function() {};
// Init config
grunt.initConfig({
jshint: {
all: ['index.js']
}
});
// Register your own tasks
grunt.registerTask('mytask', function() {
grunt.log.write('Ran my task.');
});
// Load tasks from npm
grunt.loadNpmTasks('grunt-contrib-jshint');
// Finally run the tasks, with options and a callback when we're done
grunt.tasks(['mytask', 'jshint'], {}, function() {
grunt.log.ok('Done running tasks.');
});
You can get inspiration on how to run grunt from code by looking at grunt-cli which does this and which is a project maintained by the grunt folks.
Grunt is launched from code in grunt-cli/bin/grunt and you can read more about the options in grunt/lib/grunt/cli.js.
I use it in a private project like this:
var grunt = require("grunt");
grunt.cli({
gruntfile: __dirname + "/path/to/someGruntfile.js",
extra: {key: "value"}
});
The key "extra" will be available from inside the gruntfile as grunt.option("extra")
Here is a bloggpost that describes an alternative way to run a grunt task: http://andrewduthie.com/2014/01/14/running-grunt-tasks-without-grunt-cli/