Front end Development Workflow

Envato Customers Tuts+ Courses and Tutorials
1

Hello,

Great course! I understand quite a bit, however I am struggling to connect the dots with my dev environment. Most of my development is in html, css and PHP. I dont know javascript at all, and only use it when setting up certain libraries like images sliders, or a google map, etc.

I have xampp installed as a local test enviroment. All my files are in various projects folders and currently I use sftp inside of Sublime Text to copy the files to the xampp htdocs folder. Could I please get some advice on how to adjust the lessons outlined in the course for this type of enviroment? where live reload is tied into the xampp install folder? Also where the css and javascript is minified and copied across to xampp on task run?

Would greatly appreciate all help

2

Hi @selwynorren, @AdiPurdila may be able to help you out with this :slight_smile:

1 Like
3

Tx @ianyates

4

Hi there,

If you’re working locally, you should treat your htdocs folder like any other. Simply use the terminal to go to that location and then use the workflow. If needed, you can change the folder paths using the paths object from gruntfile.js. Finally, you would access your site using the link Browsersync generated for you.

One important change here tho: if you’re using a PHP server, you’ll need to use the proxy option like this:

// Using a localhost address with a port
proxy: "localhost:8888"

Replace localhost:8888 with the address generated by XAMPP.

So your browserSync task might look like this:

browserSync: {
            files: {
                src: ['<%= paths.app_css %>/*.css', '<%= paths.app %>/*.html', '<%= paths.app_js %>/*.js']
            },
            options: {
                watchTask: true,
                proxy: "localhost:8888"
            }
        },

I hope this makes sense. If you have any more problems let me know :slight_smile: Cheers!

1 Like