gulpfile.js ：
// Import locally installed gulp
var gulp = require('gulp');
var less = require('gulp-less'); // Introduce the less plugin (npm install gulp-less to install the gulp plugin)
var cssmin = require('gulp-cssmin'); // import gulp-cssmin plugin (npm install)
var imagemin = require('gulp-imagemin'); // Compress image plugin
var uglify = require('gulp-uglify'); // plugin to compress ("uglify") JS files
var concat = require('gulp-concat'); // Merge all JS/CSS files. It will not modify the resource path introduced in html
var htmlmin = require('gulp-htmlmin'); // Compress html files.
var autoprefixer = require('gulp-autoprefixer'); // Add browser CSS private prefix. "-webkit-"
var rev = require('gulp-rev'); // Add a version number (MD5 encryption) to CSS/JS files (in order not to use browsers to cache old CSS/JS files) Use with the rev-collector plugin
var revCollector = require('gulp-rev-collector'); // Use with rev plugin. Replace the CSS/JS file introduced in html with the resource file name after adding the version number.
var useref = require('gulp-useref'); // Combine JS/CSS files. Merge resource files wrapped by <!--build--> tags in html, and modify the import path of resources in html.
var gulpif = require('gulp-if'); // 判断。
var rename = require('gulp-rename'); // Rename.
// The return value gulp is an object, with which the task list can be customized
// Implemented by a series of methods
// define the task
gulp.task('myTask',function() {
console.log('myTask');
// Execute the task: cmd---cd the directory where gulpfile.js is located (usually create gulpfile.js in the project root directory)---gulp myTask Then the callback function will be executed. (requires gulp installed globally)
});
// Define task less to preprocess all less files and compile them into CSS files
gulp.task('less',function() {
// Specify the less file location through gulp.src
return gulp.src('./public/less/*.less') // According to the specific location of project resources
.pipe(less()) // Use the gulp-less plugin to implement less to css operations.
.pipe(cssmin()) // Compressed via gulp-cssmin plugin.
.pipe(autoprefixer()) // Add browser CSS private prefix. "-webkit-"
.pipe(rev()) // Add CSS/JS file version numbers to avoid browsers using cached old files.
.pipe(gulp.dest('./release/public/css')) // Store via gulp.dest(). No css file will be created.
.pipe(rev.manifest()) // A rev-manifest.json file will be generated to record the correspondence between the native CSS/JS file and the file with the version number added.
.pipe(rename('css-manifest.json')) // Rename changes the default rev-manifest.json file name to css-manifest.json (to prevent it from being the same as other (JS) manifest.json file names file overwrite)
.pipe(gulp.dest(./release/rev)); // The save path of rev-manifest.json.
});
// Execute task: cmd---cd directory where gulpfile.js is located---gulp less Execute the defined less task. (requires gulp installed globally)
// Image processing (compressed images)
gulp.task('image',function() {
return gulp.src('./public/images/*') // A "*" direct child file and two "**" will recurse all files in the directory
.pipe(imagemin()) // Compress images through the gulp-imagemin plugin.
.pipe(gulp.dest('./release/public/images'));
});
// Compress JS
gulp.task('js',function() {
return gulp.src('./public/scripts/*.js')
.pipe(concat('all.js')) // merge into one "all.js" file
.pipe(uglify()) // Compress JS files.
.pipe(gulp.dest('./release/public/scripts'));
});
// Compress HTML file
gulp.task('html',function() {
return gulp.src(['./index.html', './views/*.html'],{base:"./"}) // The []array can pass multiple directory files {base:". /"} means that the "./" directory remains unchanged when saving (otherwise all .html files will be saved in the same directory).
.pipe(htmlmin({collapseWhitespace:true, removeComments:true, minifyJS:true})) // Compress HTML files (see API documentation for parameters) removeComments: remove comments
.pipe(gulp.dest('./release'));
});
//Resource path replacement Replace the CSS/JS file introduced in the HTML file with the version numbered file (used in conjunction with the gulp-rev plugin)
gulp.task('revCollector',function() {
return gulp.src(['./release/rev/*.json','./release/**/*.html'],{base:"./release"}) // .json is gulp-dev The dev-manifest.json file generated by the plugin.html is the html file to be replaced. **/ means that all levels of directories will be recursed
.pipe(revCollector()) // Replace with the file name after adding the version number (used in conjunction with the gulp-rev plugin)
.pipe(gulp.dest('./release'));
});
// Merge JS/CSS files. Merge resource files wrapped by <!--build--> tags in html, and modify the import path of resources in html.
gulp.task('useref',function() {
return gulp.src('./index.html')
.pipe(useref()) // Merge resource files wrapped by <!--build--> tags in html
.pipe(gulpif('*.js',uglify())) // If the (merged) is a JS file, then uglify (compress "uglify") operation.
.pipe(gulp.dest('./release'));
});
// default task
gulp.task('default',function() {
console.log('default'); // cmd---cd the directory where gulpfile.js is located---gulp executes the default task. (requires gulp installed globally)
});
// depend on other tasks
gulp.task('myTask', ['task1','task2'], function() { // [] represents other dependent tasks
console.log('task1, task2 tasks will be executed asynchronously'); // Because the dependent tasks are called asynchronously, the execution time and order of dependencies are uncertain. (Solution: add return to the callback function of the dependent task)
});
index.html (gulp-useref plugin merges CSS/JS resource files specified in html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- build:js ./angular.min.js --> <!-- gulp-useref plugin merges resource files wrapped by build tag. angular.min.js is the merged filename -->
<script src='./angular.js'></script>
<script src='./angular-route.js'></script>
<!-- endbuild -->
<!-- build:remove --> <!-- The gulp-useref plugin removes the content wrapped by the build tag -->
<script src='./xxx.js'></script>
<!-- endbuild -->
</body>
</html>