I just want to get an opinion on my workflow. I am aware of Yeoman and have on purpose decided not to use it. My workflow goes like this:
Run bower install to install all project assets dependencies.
Run grunt which copies all js files from the bower components folder to a new js folder and all css files to a new css folder.
Further use grunt task to concatenate and minify all js and css files from the new folders and put them in a dist folder.
Refer to the final minified css and js in dist folder from HTML.
One thing i certainly don't want to do in my grunt task is to perform dependency specific task e.g. grab all js file from bootstrap folder into the new js folder, then grab all js file from prettyphoto folder into the new js folder. I want the grunt task to be as generic as possible so that i can use the same gruntfile in any project no matter what the bower dependencies might look like. The reason is if i should spend all those time writing my gruntfile for each project, why would i not just grab the source codes for all the dependencies in conventional way.
So there is a grunt-contrib-copy plugin to copy files from one place to another which i use to grab all js files from inside the bower's components folder. The problem is most of the bower components come with regular js and minified version of it. So, i am copying both of them and concatenating and uglifying them. So duplicate code!
Does my workflow makes sense? Is so, how can I get rid of the problem I mentioned in the paragraph above?
If I'm understanding correctly, you should take a look at grunt-usemin. You can wrap your js tags in <!-- build:js js/foo.js -->. The useminPrepare task that's included in the package will cycle through any scripts (or css, or images, etc.) that are there and dynamically add them to the concat or uglify task.
The one downside I've found is that the usemin task is fairly slow but hopefully if this pull request is implemented, things will get much, much faster.
Related
In my project I use Webpack mainly for bundling .js and .css files.
Main question is about images. When images are used in .css files Webpack process them and exports to /dist folder. Which is fine, and works like a charm.
What I want to accomplish is pretty same story but with .html files. But! Html files are in different location then my wepack-app.
-/root
--/design
-----/src
--------/js
--------/css
--------/images
--------/...
-----/dist
--/templates
--/...
Is it possible to e.g pass additional path to scan for assets?
I don't want to produce new html. Just check which assets are used in html files from root/design/src/images then process them (same as from css files) and copy to /dist.
You can add a new entry point (a js file) that will require all the html files that you want to be processed.
You will need to install html-loader in order to allow webpack to "understand" html files.
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
Is there a best practice or common task(s) that people use to separate their source code and minified code? I don't want to have to re-minify and concatenate a file manually every time I edit it in the src/ directory.
Apologies if this is an extremely obvious answer, but I cannot seem to find any good Gulp tutorials on folder structure dependency.
Thanks in advance.
One common practice is to have a dev task that runs gulp-watch when you're working on something. This task (probably) shouldn't minify or run any other production type tasks. Then when you're ready to deploy you run your prod task which will minify and add cache busting, whatever you need (without gulp-watch).
In terms of folder structure you can have a /src and /dest directory if you'd like. It keeps things clean in your src directory and you can clean/delete the entire contents of the /dest directory because you know those are all generated files.
I want to see CSS and JS files normaly when editing them. But when I save/upload them to server I want them to be minified. Is there a plugin/setting that does this in the current version of PHPstorm?
PHPStorm doesn't have any built-in functions for minifying files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-uglify and grunt-contrib-cssmin tasks, for example . Both tasks support merging and minifying files. You can run the tasks using Grunt console. Or, you can use YUI Compressor and set it up as a file watcher (https://www.jetbrains.com/webstorm/help/minifying-javascript.html, https://www.jetbrains.com/webstorm/help/minifying-css.html)
You can add css, or js File Watcher in PhpStorm, see their docs, using uglify or yuicompressor. All configurable from the IDE
After proper setup, your .css and .js files will be minified locally( PhpStorm shows them nicely together in the left sidebar where your files are). Each time you change your original css or js file, minified versions will be autogenerated.
When uploading to the server, you just need to upload automatically minified versions.
Very convenient. I use it for non-Symfony projects ( in symfony i use assetic for minification and combining assets into one file)
I have a pre-existing project that is currently using gulp.
The key libraries/frameworks/languages are:
MongoDB - Mongoose
AngularJS - With ui-router, also using ngClassify
ExpressJS - With Passport
NodeJS
Jade
Coffeescript
Sass - '.sass' format
JPG/PNG's
Currently everything is watched using live reload, minified using uglify and gzipped. My angular html view/directive snippets are sent into a template cache js file. Even the images are minified using image min.
The single page app is very modular by design, there are multiple 'pages' to the app, each page has a specific use (Take the profile page for example), using ui-route to nest views. Not all users will use each page. Hence why I am choosing to move towards WebPack with each 'page' being a module. The goal for this application is to be as reactive as possible. With potential mild load times when switching which page/module they are on.
My current project structure has a src and dist directory each with a server and client folder. the list directory can of course be safely deleted with every build. I currently have no raw js files or raw html (aside from the gulpfile.js that just requires my gulpfile.coffee), everything gets preprocessed by gulp and thats it.
So here are my questions:
Do I replace most of my gulpfile with webpack, and let webpack process everything (Whats the advantage of this). Or do I create an intermediary folder (The gulp output), then run webpack on that folder (just dealing with the minified js/css/html files). Basically, knowing what my libraries/frameworks are, and my situation, how would you structure the build process?
Can you use an ngClassify app.coffee file as an entry point? Or does it have to be compiled first. (If you can, how?)
You can certainly use Gulp to trigger your Webpack build and manage other tasks you may have however the idea of Webpack is that it is your entire build, you no longer need Gulp tasks to 'minify, 'concatenate' and 'imagemin' files etc as Webpack does all this for you by using Plugins and Loaders.
You will have to run Webpack on the project source, not an already minified bundle created by your custom Gulp build.
The angular questions I don't have an answer to I'm afraid :)