gulp.js 自动化构建工具学习入门

Posted 2020-10-18

一、基本安装

1、安装gulp

1 $ npm install --global gulp

2、作为项目的开发依赖安装

1 $ npm install --save-dev gulp

3、在项目根目录下创建 gulpfile.js 的文件

1 var gulp = require(‘gulp‘)
2 
3 gulp.task(‘default‘,function(){
4      //将你的默认任务代码放在这里
5 })

4、运行gulp:

$ gulp

以下文章参考来源：作者：Rin阳    链接：https://www.jianshu.com/p/98db023b5b89

 

二、前端自动化Gulp工具常用插件

1、gulp-uglify(JS压缩)

gulp-uglify安装：

npm install --save-dev gulp-uglify

gulp-uglify用来压缩js文件，使用的是uglify引擎

var gulp = require(‘gulp‘);  //加载gulp
var uglify = require(‘gulp-uglify‘);  //加载js压缩

// 定义一个任务 minifyjs
gulp.task(‘minifyjs‘, function () {
    gulp.src([‘js/*.js‘,‘!js/*.min.js‘])  //获取文件，同时过滤掉.min.js文件
        .pipe(uglify())   //压缩
        .pipe(gulp.dest(‘dist/js‘));   //输出
});

2、gulp-minify-css(css压缩)

 gulp-minify-css安装：

npm install --save-dev gulp-minify-css

 

可以使用它来压缩css文件

 

var gulp = require(‘gulp‘);
var minify = require(‘gulp-minify-css‘);

gulp.task(‘cssmini‘, function () {
    gulp.src([‘css/*.css‘, ‘!css/*.min.css‘])  //要压缩的css
        .pipe(minify())
        .pipe(gulp.dest(‘dist/css‘));
});

 3、gulp-minify-html(html压缩)

gulp-minify-html 安装：

npm install --save-dev gulp-minify-html

 

可以使用它来压缩html文件

var gulp = require(‘gulp‘);
var htmlmini = require(‘gulp-minify-html‘);

gulp.task(‘htmlmini‘, function () {
    gulp.src(‘*.html‘)
        .pipe(htmlmini())
        .pipe(gulp.dest(‘dist/minihtml‘));
})

 

4、gulp-imagemin(图片压缩)

gulp-minify-html 安装：

npm install --save-dev gulp-imagemin

可以使用gulp-imagemin的插件来压缩jpg、png、gif等图片。（imagemin也是有插件的，是基于imagemin产生的插件，所以前缀是imagenin开头）

 

压缩png插件-imagemin-pngquant安装：

npm install --save-dev imagemin-pngquant

 

gulipfile.js:

var gulp = require(‘gulp‘);
var imagemin = require(‘gulp-imagemin‘);
var pngquant = require(‘imagemin-pngquant‘); //png图片压缩插件

gulp.task(‘default‘, function () {
    return gulp.src(‘src/images/*‘)
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest(‘dist/imgmini‘));
});

 

5、gulp-concat(文件合并)
gulp-concat 安装：

npm install --save-dev gulp-concat

 

合并css与js文件，减少http请求

 

var gulp = require(‘gulp‘);
var concat = require("gulp-concat");
 
gulp.task(‘concat‘, function () {
    gulp.src(‘js/*.js‘)  //要合并的文件
    .pipe(concat(‘all.min.js‘))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(uglify()) //压缩
    .pipe(gulp.dest(‘dist/js‘)); //输出
});

 6、gulp-css-spriter(合成雪碧图)

gulp-css-spriter安装：

 

npm install gulp-css-spriter

 

 

 

gulpfile.js文件：

 

var gulp = require(‘gulp‘);

var spriter=require(‘gulp-css-spriter‘);

gulp.task(‘spriter‘,function(){
    gulp.src(‘./src/assets/css/user.css‘)
        .pipe(spriter({
            ‘spriteSheet‘:‘dist/imgmin/spritesheet.png‘,// 这是雪碧图自动合成的图
            ‘pathToSpriteSheetFromCSS‘:‘../../../dist/imgmin/spritesheet.png‘// 这是在css引用的图片路径
        }))
        .pipe(gulp.dest(‘./dist/css‘));// 输出
})

 

 7、执行多个任务、监听文件变化

gulp.task(‘build‘,[‘minifyjs‘,‘imagemin‘,‘cssmin‘]);
// 监听文件变化
 gulp.task(‘watch‘, function () {     gulp.watch([‘static/mui/js/*.js‘,‘static/*.js‘,‘!static/mui/js/*.min.js‘,‘src/assets/img/*‘], [‘build‘]);
// });
gulp.task(‘default‘, [‘build‘,‘watch‘]);