Detailed explanation of gulp installation and packaging and merging

This article mainly introduces you to the tutorial on how to implement a packaging and merging method in gulp, and shares the solution to the order when gulp packages js/css and merges them into one file. The article introduces it in detail through the example code. It needs to be Friends can refer to it, and follow the editor to learn together. Hope it helps everyone.

Preface

gulp is a tool for building code in the front-end development process. It is a tool for building automation projects; it can not only optimize website resources, but also eliminate many repetitive tasks during the development process. Tasks can be completed automatically using the right tools; using her, we can not only happily write code, but also greatly improve our work efficiency.

Installation, packaging and merging

1. Install node.js Download address: http://nodejs.cn/

Open the node.js command line and enter: node - v , if there is a version number, it is installed correctly.

2. Install Taobao image: Command line input:

npm install -g cnpm --registry=http://registry.npm.taobao.org

Purpose: Make downloading faster.

3. Install gulp globally

cnpm install --global gulp

4. Create a directory, open the F drive, and create a gulp folder.

Command line input:

f:

cd gulp

5. Install local gulp

cnpm install --save-dev gulp

6. Create package.json file

cnpm init

Just enter all the way

7. Open this gulp directory in a web editor, such as hbuilder and webstorm.

Create the gulpfile.js file in the gulp directory, the entry point for gulp running

8. Determine what kind of packaging and compression, html, js, css, img

9.js packaging

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
});

10. Run; node.js input

gulp

will report an error, prompting the gulp-concat component Not installed. Start the installation: cnpm install gulp-concat --save-dev

Run again: gulp

reports an error again, indicating that the gulp-uglify component is not installed. Start the installation: cnpm install gulp-uglify --save-dev

Run again: gulp

. . . . . . . . . . . . . . .

After success,

You will see finished 'default' here. 'default' is the default entry for starting the gulp.task task. If you create multiple task tasks and modify the task name such as:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
　　gulp.task('style', function() { //task 任务名称为style
 
　　gulp.src('.css/*.css')
 
　　.pipe(concat('styles.css'))
 
　　.pipe(autoprefix('last 2 versions'))
 
　　.pipe(minifyCSS())
 
　　.pipe(gulp.dest('styles'));
 
　　});

Rerun: gulp

Result:

You will find that only The default task task was run. Because this is the only default gulp execution entry.

Modify as follows

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('js',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
　　gulp.task('style', function() { //task 任务名称为style
 
　　gulp.src('.css/*.css')
 
　　.pipe(concat('styles.css'))
 
　　.pipe(autoprefix('last 2 versions'))
 
　　.pipe(minifyCSS())
 
　　.pipe(gulp.dest('styles'));
 
　　});

<br>gulp.task('default',function(){
 gulp.run(['js','style']); //这里开始执行多个task任务
});

If you encounter any component that is not installed, I think you should know how to operate it.

11. Image compression

var imagemin = require('gulp-imagemin');
gulp.task('img', function() {
 return gulp.src('imgs/*.png')
 .pipe(imagemin())
 .pipe(gulp.dest('miniImg'));
});

12.html compression

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
 return gulp.src('../*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('../'));
});

13. Modify the path problem yourself

Gulp merges js/css into one file when packaging it When solving the order

1, you can use insert gulp-order.

2. You can write it like this:

return gulp.src(['js/common.js','js/**/*.js'])
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录

Related recommendations:

Gulp implements static web page modularization example sharing

Detailed explanation of simple gulp packaging in nodejs

How to use gulp to achieve file compression and browser hot loading

The above is the detailed content of Detailed explanation of gulp installation and packaging and merging. For more information, please follow other related articles on the PHP Chinese website!