Gulp Starter Project

This gulp starter project will help you to start developing your own projects fast, easy and with less project structuring confusions.

Running the project for the first time:

To run the project for the first time, execute the following command in your terminal while you are in the root directory of the project folder: npm install

The list of features included in this starter project are as follows:

• Compiling SCSS files into CSS: You will have the option to output sourcemap file in development mode and also output minified production version. There is also an option to output a RTL version and with sourcemap file from the compiled CSS file in development mode. You will also have a detailed info if there are errors to fix them or enhancements needed to be done in your SCSS files.
• Compiling .kit files into HTML: A (*.kit) file is just HTML with special comments. Kit adds two things to HTML: (imports) and (variables). Gulp compiles Kit files into HTML, so Kit is ideal for static sites. You can read more about "kit" files through this link.
• Minifying and combining all JS files into one file: This is useful to have less http requests and minifying the output file to save more files size. You can also compile the js files in custom order, you can do that by adding a number suffix to each file name inside the "/src/js/libs" folder with the order you want, e.g. (01.jquery.min.js, 02.bootstrap.min.js, etc...).
• Minifying images: It's easy now to add images to your project without caring about their sizes, Gulp will handle this task for you. In each time you run the project you will get details about the task results in your terminal.

The project source folders structure:

• src:
  • fonts: contains the fonts used in the project
  • images: contains the images used in the project
  • js: contains the "app.js" file for js custom code and "libs" folder for additional js libraries
    • libs: contains the jQuery or any additional js libraries to be used in the project
  • kit: contains the kit files of the project which contains the HTML code
    • components: contains the reusable HTML code in multiple pages
    • pages: contains the main structure of pages
    • shared: contains the shared HTML code across the project
  • scss:
    • components: contains the reusable SCSS code in multiple pages
    • libs: contains the additional CSS and SCSS libraries to be used in the project
    • pages: contains the main SCSS code for pages
    • shared: contains the the shared SCSS code across the project
    • utils: contains the fonts import code, SASS functions, SASS mixins and SASS variables

The list of commands to use with your project:

• gulp: Get a production version of the project.
• gulpRTL: Get a production version of the project with RTL support.
• gulpDev: Run the development server with sourcemaps files.
• gulpDevRTL: Run the development server with sourcemaps files and with RTL support.
• buildStyles: Run the SCSS compilation process.
• buildStylesRTL: Run the SCSS compilation process with RTL support.
• buildJS: Run the JS combination and minification process.
• buildKitFiles: Run the Kit files compilation process.
• copyFonts: Copy the fonts from the src to the development or production folders.
• minifyImages: Run the images minification process and copy them from the src to the development or production folders.
• watchStyleFiles: Run the SCSS watch command to watch any files changes and compile them.
• watchStyleFilesRTL: Run the SCSS watch command to watch any files changes and compile them with RTL support.
• watchJsFiles: Run the JS watch command to watch any files changes and combine and minify them.
• watchKitFiles: Run the kit files watch command to watch any files changes and compile them.
• watchFontsFiles: Run the copy fonts watch command to copy them from the src to the development or production folders.
• watchImagesFiles: Run the minify images watch command to minify images and copy them from the src to the development or production folders.