The most detailed explanation of gulp installation + packaging + merging-JS Tutorial-php.cn

The most detailed explanation of gulp installation + packaging + merging

php中世界最好的语言

Release： 2018-04-14 14:27:46

Original

2762 people have browsed it

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

Copy after login

Purpose: To make the next step faster.

3. Install gulp globally

cnpm install --global gulp

Copy after login

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

Command line input:

f:
cd gulp

Copy after login

5. Install local gulp

cnpm install --save-dev gulp

Copy after login

6. Create package.json file

cnpm init

Copy after login

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目录下。
});

Copy after login

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'))
  });

Copy after login

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任务
});

Copy after login

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'));
});

Copy after login

12.htmlCompression

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

Copy after login

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

Copy after login

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!