gulp-前端项目自动化(工程化)

古城微笑少年丶 2022-07-12 05:48 277阅读 0赞

## gulp对网站优化 ##

*  gulp依赖插件能做什么？
    
     *  压缩html、js、css
     *  css、js文件名md5化
     *  压缩图片
     *  es6语法转es5语法

## 安装gulp ##

*  安装（全局和项目中都需要安装）

[http://www.gulpjs.com.cn/docs/api/][http_www.gulpjs.com.cn_docs_api] [https://github.com/gulpjs/gulp][https_github.com_gulpjs_gulp]

npm install gulp -g

项目根目录创建gulpfile.js

## 安装es6转换为es5工具 ##

[https://www.npmjs.com/package/gulp-babel][https_www.npmjs.com_package_gulp-babel]

npm install --save-dev gulp-babel babel-preset-es2015

## gulp压缩js插件 ##

gulp压缩js插件（只能识别es5代码，使用之前请先将es6代码转换成es5）  
在项目中利用它实现src下面的所有js文件的压缩

[https://www.npmjs.com/package/gulp-uglify][https_www.npmjs.com_package_gulp-uglify]

npm install --save-dev gulp-uglify

const gulp = require('gulp');
    const babel = require('gulp-babel');
    var uglify = require('gulp-uglify');
    
    //es6转es5
    //压缩js
    gulp.task('default', () => {
        gulp.src(["./src/controller/*.js","./src/model/*.js","./src/router/*.js","./src/tool/*.js","./src/*.js","./src/www/scripts/**/*.js"], {base:"./src"})
            .pipe(babel({
                presets: ['es2015']
            }))
            .pipe(uglify())
            .pipe(gulp.dest('dist'));
    });

## gulp压缩css插件gulp-clean-css ##

[https://www.npmjs.com/package/gulp-clean-css][https_www.npmjs.com_package_gulp-clean-css]

npm install gulp-clean-css --save-dev

//压缩css
    var cleanCSS = require('gulp-clean-css');
    gulp.task('minify-css', function() {
        return gulp.src('./src/www/css/*.css',{base: "./src"})
            .pipe(cleanCSS({compatibility: 'ie8'}))
            .pipe(gulp.dest('dist'));
    });

## gulp压缩html插件 gulp-htmlmin ##

[https://www.npmjs.com/package/gulp-htmlmin][https_www.npmjs.com_package_gulp-htmlmin]

npm i gulp-htmlmin --save-dev

//压缩html
    var htmlmin = require('gulp-htmlmin');
    
    gulp.task('minify', function() {
        return gulp.src('./src/views/**/*.html',{base:"./src"})
            .pipe(htmlmin({
                collapseWhitespace: true,
                minifyJS:true,
                minifyCSS:true
            }))
            .pipe(gulp.dest('dist'));
    });

## gulp压缩图片插件gulp-imagemin ##

[https://www.npmjs.com/package/gulp-imagemin][https_www.npmjs.com_package_gulp-imagemin]

npm install --save-dev gulp-imagemin

//压缩图片
    const imagemin = require('gulp-imagemin');
    gulp.task('imagemin', () =>
        gulp.src(["./src/www/images/**/*.*"], {base:"./src"})
            .pipe(imagemin())
            .pipe(gulp.dest('dist'))
    );

## gulp给css和js文件重命名为MD5插件 gulp- ##

[https://www.npmjs.com/package/gulp-rev][https_www.npmjs.com_package_gulp-rev]

npm install --save-dev gulp-rev

var rev = require('gulp-rev');
    
    //文件名md5化
    gulp.task('rev', function () {
        return gulp.src('src/www/css/*.css',{base: "./src"})
            //先压缩
            .pipe(cleanCSS({compatibility: 'ie8'}))
            //再对文件名md5化
            .pipe(rev())
            .pipe(gulp.dest('dist'))
            //生成源文件名称和md5化文件名称的映射文件
            .pipe(rev.manifest())
            .pipe(gulp.dest("./src/rev"))
    
    });

## gulp替换html中引用的css文件名称为md5后的名称 gulp-rev-collector ##

[https://www.npmjs.com/package/gulp-rev-collector][https_www.npmjs.com_package_gulp-rev-collector]

npm install --save gulp-rev-collector

使用案例：[http://www.tuicool.com/articles/iA7zmym][http_www.tuicool.com_articles_iA7zmym]

var revCollector = require('gulp-rev-collector');
    gulp.task('revCollector', function() {
        return gulp.src(['./src/rev/**/*.json','./src/views/**/*.html'],{base:"./src"})
            //替换文件名
            .pipe(revCollector({
                replaceReved: true,
            }))
            //压缩html
            .pipe(htmlmin({
                collapseWhitespace: true,
                minifyJS:true,
                minifyCSS:true
            }))
            .pipe(gulp.dest('dist'));
    });

## 利用gulp-copy执行文件夹的拷贝工作 ##

[https://www.npmjs.com/package/gulp-copy][https_www.npmjs.com_package_gulp-copy]

npm install gulp-copy --save-dev

const gulpcopy = require('gulp-copy');
    gulp.task('copy', () =>
        gulp.src(['./src/**/*.woff2','./src/**/*.woff','./src/**/*.swf','./src/www/vendor/**/*.*'],{base:"./src"})
            .pipe(gulpcopy("dist",{prefix:1}))
    );

[http_www.gulpjs.com.cn_docs_api]: http://www.gulpjs.com.cn/docs/api/
[https_github.com_gulpjs_gulp]: https://github.com/gulpjs/gulp
[https_www.npmjs.com_package_gulp-babel]: https://www.npmjs.com/package/gulp-babel
[https_www.npmjs.com_package_gulp-uglify]: https://www.npmjs.com/package/gulp-uglify
[https_www.npmjs.com_package_gulp-clean-css]: https://www.npmjs.com/package/gulp-clean-css
[https_www.npmjs.com_package_gulp-htmlmin]: https://www.npmjs.com/package/gulp-htmlmin
[https_www.npmjs.com_package_gulp-imagemin]: https://www.npmjs.com/package/gulp-imagemin
[https_www.npmjs.com_package_gulp-rev]: https://www.npmjs.com/package/gulp-rev
[https_www.npmjs.com_package_gulp-rev-collector]: https://www.npmjs.com/package/gulp-rev-collector
[http_www.tuicool.com_articles_iA7zmym]: http://www.tuicool.com/articles/iA7zmym
[https_www.npmjs.com_package_gulp-copy]: https://www.npmjs.com/package/gulp-copy

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue基础】前端工程化Vue项目

一、创建Vue项目步骤 1、新建一个文件夹，起名为vue\_project01 2、在该文件夹中打开cmd，输入指令vue ui，打开图形化界面 ![c80acd303f

Myth丶恋晨/ 2023年10月11日 21:36/ 0 赞/ 36 阅读

相关浅谈前端工程化（二）Gulp和Webpack构建项目

前端构建前端构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。过去，前端一直在各种为战，不停的造轮子

悠悠/ 2022年11月26日 01:56/ 0 赞/ 215 阅读

相关前端工程化：在gulp中顺序执行任务

[gulp][] 是前端开发过程中对代码进行构建(Build)的工具，类似于Java世界中的Ant或者Maven。与Ant或Maven类似，在用gulp进行build时，经常需

本是古典何须时尚/ 2022年08月07日 14:48/ 0 赞/ 311 阅读

相关 gulp-前端项目自动化(工程化)

gulp对网站优化 gulp依赖插件能做什么？压缩html、js、css css、js文件名md5化压缩图片

古城微笑少年丶/ 2022年07月12日 05:48/ 0 赞/ 278 阅读

相关浅谈gulp前端工程化

为什么要做前端工程化？ 1，校验无误后，合并压缩多个js文件 2，对css文件进行编译（各种css框架，如sass less）使用工具：用git辅助cmd（

灰太狼/ 2022年06月14日 01:13/ 0 赞/ 241 阅读

相关 Gulp前端自动化工具

Gulp 当下的前端开发不再是简简单单的使用HTML+CSS+JavaScript这些简单的技术构建网页应用程序了我们要提高效率，就必须减少重复的工

傷城~/ 2022年06月13日 09:13/ 0 赞/ 337 阅读

相关 Gulp 自动化构建

Gulp 自动化构建 [use-gulp][] [官网][Link 1] gulp 可以做什么? 1. 编译 sass 2. 合并优化压缩 css 3.

秒速五厘米/ 2022年05月26日 10:13/ 0 赞/ 315 阅读

相关前端自动化构建工具——gulp

操作过程：需要配置文件后才能执行 $ gulp命令（1）配置一些基本信息，执行命令：$ npm init 在git指令中，对下面每一项进行配置，注意：GitHub项目

一时失言乱红尘/ 2022年05月09日 11:24/ 0 赞/ 394 阅读

相关 thinkphp整合系列之gulp实现前端自动化

这又是一个一次整合终身受益；不止是终身；换个项目同样可以很方便复用；不信你看另一个项目： thinkphp整合系列之gulp实现前端自动化虽然我等叫php程序猿；但是不可

左手的ㄟ右手/ 2021年09月30日 07:38/ 0 赞/ 410 阅读

相关基于gulp的前端自动化环境搭建

基于gulp的前端自动化环境搭建创建git目录安装第三方依赖管理工具bower 安装angular

骑猪看日落/ 2021年09月11日 07:14/ 0 赞/ 354 阅读