Optimizing JavaScript files

JavaScript files for production: minify and concatenation.



we create a file in app folder as index.html

<!DOCTYPE html>
<html>
<head>
    <title>Radhey</title>
</head>
<body>
This is gulp starter by radhey
<!--build:js  js/main.min.js-->
<script src="js/lib/profile.js"></script>

<!--endbuild-->

</body>
</html>


Create a file as gulpfile.js

var gulp = require('gulp');
gulp.task('task-name', function() {
  // Stuff here
});

var useref = require('gulp-useref');
// Other requires...
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');

gulp.task('useref', function(){
  return gulp.src('app/*.html')
    .pipe(useref())
    // Minifies only if it's a JavaScript file
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulp.dest('dist'))
});

Run task as gulp useref

Now your folder structure become as folder name dest with minify js and index.html




Installing gulp

$ sudo npm install gulp -g
 
Creating a gulp project
 
# ... from within our project folder
$ npm init
 
The npm init command creates a package.json file for your project which stores information 
about the project, like the dependencies used in the project  

{
  "name": "radhey",
  "version": "1.0.0",
  "description": "test by radhey",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-uglify": "^3.0.1",
    "gulp-useref": "^3.1.5"
  }
}

Once the package.json file is created, we can install Gulp into the project by using the following command:

$ npm install gulp --save-dev
 
Determining folder structure.
 
|- app/
      |- css/
      |- fonts/
      |- images/ 
      |- index.html
      |- js/ 
      |- scss/
  |- dist/
  |- gulpfile.js
  |- node_modules/
  |- package.json
 
 
 

Comments

Post a Comment

Popular posts from this blog

Getting started Mysql with JSON

Getting started Mysql with JSON Let us create a table playes CREATE TABLE `players` ( `id` INT NOT NULL , `player_and_games` varchar ( 5000 ), PRIMARY KEY ( `id` ) );     Insert JSON data into table    INSERT INTO `players` ( `id` , `player_and_games` ) VALUES ( 1 , '{ "name": "Sally", "games_played":{ "Battlefield": "yes", "Crazy Tennis": "yes", "Puzzler": { ...
Read more

How to get the parameter from url in codeigniter?

$this -> uri -> segment ( n ); where n = 1 for controller, n = 2 for method and n = 3 for parameter and so on. You need n = 3 to get parameter. In your path localhost/log/job/php , your method name is missing. Even if your method name is index then you route will be localhost/log/job/index/php In case if you need to remove index.php from url then you will get parameter using localhost/log/index.php/job/index/php To remove index.php you need to create .htaccess file by following these steps: Create a .htaccess file where index.php file is located with content RewriteEngine on RewriteCond %{ REQUEST_FILENAME } !- f RewriteCond %{ REQUEST_FILENAME } !- d RewriteRule ^(.*) $ index . php / $1 [ L , QSA ] Make sure that apache can access this .htaccess file. To do this edit apache configuration file. If you use ubuntu, then it is /etc/apache2/sites-available/default and then change AllowOverride none to AllowOverride all for directory and www dir...
Read more

MySQL event scheduler and how to create MySQL events to automate database tasks

Working with MySQL Scheduled Event  SET GLOBAL event_scheduler = OFF;  SET GLOBAL event_scheduler = ON; MySQL event scheduler and how to create MySQL events to automate database tasks. A MySQL event is a task that runs based on a predefined schedule therefore sometimes it is referred to as a scheduled event. MySQL event is also known as “temporal trigger” because it is triggered by time, not by table update like a trigger. A MySQL event is similar to a cron job in UNIX or a task scheduler in Windows. You can use MySQL events in many cases such as optimizing database tables, cleaning up logs, archiving data, or generate complex reports during off-peak time. MySQL event scheduler configuration MySQL uses a special thread called event schedule thread to execute all scheduled events. You can see the status of event scheduler thread by executing the following command: SHOW PROCESSLIST; By default, the event scheduler thread is not enabled. To enable and start the event scheduler t...
Read more