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
{
"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
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