The most detailed explanation of gulp installation + packaging + merging

This time I will bring you the most detailed explanation of gulp installation, packaging and merging. What are the precautions for using gulp to install, package and merge? The following is a practical case, let’s take a look. one time.

Preface Gulp is a tool for building code during the front-end development process, and is a tool for building automated projects; not only can it optimize website resources, but many repetitive tasks during the development process can be completed automatically using the correct tools

；Using her, we can not only write code happily, but also greatly improve our work efficiency.

Installation, packaging and merging

1. Installation

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: To make the next step faster.

3. Install gulp globally

cnpm install --global gulp

4. Create a directory, open drive F, 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 to confirm

7.web

EditorOpen this gulp directory, such as hbuilder, webstorm. Create the gulpfile.js file in the gulp directory

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

There will be an error message indicating that the gulp-concat component is not installed. Start the installation:

cnpm install gulp-concat --save-dev

Run again: gulp

An error is reported again, indicating that the gulp-uglify component is not installed. Start the installation:

cnpm install gulp-uglify --save-dev

Run again: gulp

Here you will see finished ‘default’, ‘default’ is the default entry for starting the gulp.task task. If you create multiple 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'))
   .ipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('styles'))
  });

Rerun: gulp

result:

You will find that only the default task task is 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.htmlCompression

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

Solution to the order when gulp packages js/css and merges them into one file

1. You can use gulp-order to insert.

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目录

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement automatic loading of images with js and jquery (with code)

How to operate Vue2.0 User rights

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