Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I'm after a linux server-side script I can run which can complete several tasks.
We currently have an in-house PHP framework - which runs on Apache with MySQL - the only server-side 'technology' we use is composer.
I am after a task runner - similar to grunt & gulp which does not run on Node and can work with an existing site set up - something that can be plugged in after the site is set up.
The thing that puts me off gulp and grunt is it suits your application if it is built on Node or you are using other node apps - otherwise you need a package.js along with a Gruntfile.
Tasks I would like it to run as a minimum is compiling Scss and minifying JS. Other tasks would be JS concatenation and image compression.
I've looked at Grunt, Gulp, Guard and Brunch.
Any suggestions?
uglifyjs will minify javascript, and other tools like compass can compile scss.
You can use make as a task runner to manage all that.
The default choice of Make, because of extremely widespread usage and software freedom, is to use GNU Make, which has a comprehensive manual.
One of the very important and useful operation that you can do using Grunt is running shell command, now it can be sequentially or in parallel.
Have a look at the grunt-shell, using this you can run any sort of complex shell command.
You can run also bower to install all your dependencies directly into your assets so that you don't have to download them one by one.
There are whole lot of plugins available you can just look at them here
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
Im looking for the simplest possible module to hot-reload a static folder with all its contents.
With hot-reload i mean that the browser reloads the page.
i tried simple auto reload server
i could not get it running and the config seems a bit over engineered for my use-case.
my best guess would be to write it myself in node, i cant be the first person who runs into that problem.
i dont want to use any taskrunner like webpack, grunt or gulp.
just to keep it as simple as possible.
You just need BrowserSync.
1- First install it npm install -g browser-sync
2- Run in console browser-sync start --server --files "css/*.css" . You can add any other files you need to reload like: --files "css/*.css,js/*.js,pages/*.html"
3- Open the url provided by it, and it will reload the changes in any .css file in the css folder.
Documentation
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm a little lost as to how I should proceed, actually I don't even know where to start.
I've been working on a few wordpress sites lately, usually I create a dev environment using npm grunt.
I set up a folder and do npm init. Then I install all the grunt plugins I need such as: watch, sass, uglify etc... I then download wordpress and set up the gruntfile.js so that for example my sass will compile to my wordpress theme's stylesheet. Just the usual (I hope).
The thing is rather than always repeating the same step over and over I'd like to automate it ( same config step for each site ).
So here is my question, how do you go about creating a script that will automaticaly install grunt plugins and configure them, download the latest wordpress and set up the theme files ( domain name etc...)?
I don't need an explanation on how to do all these steps but just a few pointers on where to start and what tools to use would be great. Being quite the novice in script writing any information is good to use.
Try yeoman.
There is yeoman generator for wordperss boilerplate. It uses gulp instead grunt, but has same idea that you need.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
In the past I've used a yeoman-generator Grunt for all of my dev tasks. Usually when working on a project I'll use it with compass to compile my scss, and then package and uglify my JS, optimize images, lint my code, and many other useful things.
Recently I've seen a trend towards people to use webpack instead of grunt plugins for many of these tasks. Why is this? What is better about a module bundler in this regard?
I'm sure others have their reasons, but the biggest reason why I migrated to webpack (more specifically webpack-dev-server), is because it serves your bundle from memory (as opposed to disk), and its watcher will recompile only the files you changed while reusing the rest from cache (in memory). This allows development to be much faster. What I mean is, while I am actively editing code, I can ctrl + s in Sublime Text, by the time I alt + tab to Chrome, it's already done rebuilding. I had a grunt + browserify + grunt-watch setup before, and it took at least 5 seconds to rebuild every time I save (that is after I've made bunch of specialized optimizations in grunt build). That being said, I still integrated webpack with gulp, so I got a task-runner for my project.
EDIT 1: I also want to add that the old grunt + LESS/SASS + browserify + uglify + grunt-watch setup didn't scale well. I was working on a major project from scratch. At first it was fine, but then as the project grew, it got worse every day. Eventually it became incredibly frustrating to wait for grunt to finish building every ctrl + s. It also became apparently that I was waiting for bunch of unchanged files.
Another nice little thing is that webpack allows you to require stylesheets in .js, which establishes coupling of source files in the same module. Originally we established stylesheet dependencies by using import in .less files, but that disconnected source files in the same module and established a separate dependency graph. Again all of these are highly opinionated, and this is just my personal opinion. I'm sure others think differently.
EDIT 2: Alright after some discussions below, let me try to offer a more concise and less opinionated answer. One thing that webpack does really well is that can watch, read, preprocess and update cache and serve with minimal amount of file I/O and processing. Gulp pipe works pretty great, but when it comes to bundling step, it inevitably ends up having to read all of the files from a temp directory including those unchanged. As your project grow, wait time for this step grows as well. On the other hand, webpack-dev-server keeps everything cached in memory, so the amount of wait time during development is kept minimal. However to achieve this kind of memory caching, webpack will need to cover from watch to server, so it will need to know your preprocessing configs. Once you have configured webpack to do just that, you might as well just reuse the same configs for spiting out builds other than dev server. So we ended up in this situation. That being said, exactly what steps you want webpack to do is still up to your personal preferences. For example, I don't do image processing or lint in my dev server. In fact, my lint step is a totally separate target.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I have many CSS & JS files. Ideally, I just want to use some command line tool to select all those css & js files, and minify them into one file each. Any simple tools for this?
The npm respository offers many command line tools for this, for example:
https://www.npmjs.com/package/uglify-js
https://www.npmjs.com/package/uglifycss
Just install them with "npm install -g [package-name]", after installing Node.js - which comes with npm.
You're looking for yuicompressor? It minifies and combines multiple CSS files (or JS files) and concatenates them to one single file.
Example:
yuicompressor *.js > javascript.min.js
You can use gulp to do this.
Take a look at this tutorial for some simple examples, including css and js minification :
http://julienrenaux.fr/2014/05/25/introduction-to-gulp-js-with-practical-examples/
Of note is the js example, which demonstrates minifiying an entire directory - you can do the same with css as well.
You will have to create one small config file unless you use the gulp-shell node package. I probably wouldn't bother with that when first learning gulp.
There are a few "set up gulp" tutorials, including this one: http://travismaynard.com/writing/getting-started-with-gulp.
A build tool like gulp or grunt are made to do this, plus you can do a lot more once you're familiar with one of them.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I have 18 CSS files and 20 JS files. After running in Chrome's Console Aufits-->Remove unused CSS rules. I can see some files have 93% of unused code. Something similar happens to the JS files. My website is only one html file and has no nested html files.
The ideal solution to my needs would be a software that scans my website and generates a single CSS file and a single JS file and only with the used code. If this tool does not exist, i can continue living with all the files but i need a tool to delete de unused code and leave just the used one.
Is there such a software?
yes, you can! use uncss that's a pretty nice tool, you'll need to install node.js, grunt, bower, git and install it by using npm.
then you just need to do a npm install -g uncss
that apply with any technology you can just use the dev node.js environment which is awesome!