Reference link: https://www.kancloud.cn/thinkphp/gulp-guide/43994
#install gulp
Gulp is a front-end construction tool based on Node.js, so you need to install nodejs first.
Nodejs installation: http://tzhennan.iteye.com/admin/blogs/2410483
#After successful installation of nodejs, use npm to install global gulp
$ npm install -g gulp
#Install local gulp in the project root directory
$ npm install -g gulp --save-dev
After the installation is successful, there will be an additional node_modules folder in the project root directory
#gulp itself does not provide functions such as js compression and merging, you need to use gulp related plug-ins
1. CSS compression: gulp-clean-css
2. js compression: gulp-uglify
3. js merge: gulp-concat
4. Rename: gulp-rename
5. js code detection: gulp-jshint
6. Atlas compression: gulp-imagemin
#Execute the command in the project root directory to install the above plugins
$ npm install gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-imagemin --save-dev
$ npm install jshint gulp-jshint --save-dev
ps: gulp-jshint and jshnt should be installed together
Installed plugins will appear in the node_modules folder mentioned above
# use gulp
Add the following code in gulpfile.js
var gulp = require('gulp'),
cleanCSS = require('gulp-clean-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
imageMin = require('gulp-imagein');
// syntax check
gulp.task('jshint', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//compress css
gulp.task('minifycss', function() {
return gulp.src('css/*.css') //Files that need to be manipulated
.pipe(rename({suffix: '.min'})) //rename the compressed file name
.pipe(cleanCSS({compatibility: 'ie7'})) // perform compression
.pipe(gulp.dest('css-min')); //output folder
});
//compress, merge js
gulp.task('minifyjs', function() {
return gulp.src('js/*.js') //The file that needs to be operated
.pipe(concat('main.js')) //Merge all js to main.js
.pipe(gulp.dest('js')) //output to a folder
.pipe(rename({suffix: '.min'})) //rename the compressed file name
.pipe(uglify()) //compress
.pipe(gulp.dest('js-min')); //output
});
gulp.task('image',function(){
gulp.src('images/*.*')
.pipe(imageMin({progressive: true}))
.pipe (gulp.dest ('images-min'))
})
//Default command, after entering gulp in cmd, this task is executed (compressing js needs to be done after checking js)
gulp.task('default',['jshint'],function() {
gulp.start('minifycss','minifyjs');
});
#Execute the gulp command in the project root directory:
$ gulp
[20:43:30] Using gulpfile ~/project/html/gulpfile.js
[20:43:30] Starting 'jshint'...
[20:43:30] Finished 'jshint' after 60 ms
[20:43:30] Starting 'default'...
[20:43:30] Starting 'minifycss'...
[20:43:30] Starting 'minifyjs'...
[20:43:30] Finished 'default' after 3.24 ms
[20:43:30] Finished 'minifycss' after 134 ms
[20:43:30] Finished 'minifyjs' after 132 ms
Now you can see the compressed css file in the css-min folder, and you can see the merged compressed main.min.js in js-min. When the task is completed, you only need to modify the path referenced by CSS and JS in HTML to a new path.