登录
当前位置： 首页 > 工具软件 > gulp-ng-config > 使用案例 >

前端构建工具gulp安装（整理补充）

林俊英
2023-12-01

第1步：安装Node

首先，最基本也最重要的是，我们需要搭建node环境。访问 nodejs.org，然后点击大大的绿色的 install 按钮，下载完成后直接运行程序，就一切准备就绪。npm会随着安装包一起安装，稍后会用到它。

为了确保Node已经正确安装，我们执行几个简单的命令。

node -v
npm -v

如果这两行命令没有得到返回，可能node就没有安装正确，进行重装。

第2步：安装gulp

首先我们要全局安装一遍：

npm install -g gulp

运行时注意查看命令行有没有错误信息，安装完成后，你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

gulp -v

接着我们在项目的根目录手动添加一个package.js文件，在package.json文件里写如下的格式：

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {

  }
}

然后在cmd里进入到项目的根目录，输入如下命令

npm install gulp --save-dev

就会发现项目的根目录里面多了【node_modules】文件夹，里面增加了gulp的文件夹。同时package.json文件里的【devDependencies】里面多了一行关于gulp的版本号

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {
      "gulp": "^3.9.0" //新增一行gulp的版本号
  }
}

第3步：新建gulpfile.js文件

我们将要使用Gulp插件来完成我们以下任务：

  • sass的编译（gulp-sass）
  • 自动添加css前缀（gulp-autoprefixer）
  • 压缩css（gulp-minify-css）
  • 压缩html（gulp-minify-html）
  • js代码校验（gulp-jshint）
  • 合并js文件（gulp-concat）
  • 压缩js代码（gulp-uglify）
  • 压缩图片（gulp-imagemin）
  • 自动刷新页面（gulp-livereload）
  • 图片缓存，只有图片替换了才压缩（gulp-cache）
  • 更改提醒（gulp-notify）

安装这些插件需要运行如下命令：

npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-minify-html jshint gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

补充：安装jshint报错解决方法：npm install –save-dev jshint gulp-jshint

更多插件可以看这里gulpjs.com/plugins/

【node_modules】文件夹，里面增加了n个插件文件夹。package.js文件里的【devDependencies】里面多了n行插件的版本号

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-cache": "^0.3.0",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^1.11.2",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.1",
    "gulp-minify-html": "^1.0.4",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.4.1"
  }
}

接着我们要创建一个gulpfile.js在根目录下，gulp只有四个API： task，watch，src，和 dest

【task】这个API用来创建任务，在命令行下可以输入 gulp test 来执行test的任务。
【watch】这个API用来监听任务。
【src】这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss,vender.scss]，也可以是正则表达式/**/*.scss。
【dest】这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

简单的项目目录结构

project(项目名称)

|–node_modules          组件目录
|–dist                  发布环境
    |–css               样式文件(style.css style.min.css)
    |–js                js文件(main.js main.min.js)
|–src 生产环境
    |–sass              sass文件
    |–js                js文件
|–gulpfile.js           gulp任务文件
|–package.json          依赖gulp模块

编写gulp任务

// 引入 gulp及组件
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    minifyhtml = require("gulp-minify-html"),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');


// Styles任务
gulp.task('styles', function() {
    //编译sass
    return gulp.src('src/css/*.scss')
        .pipe(sass())
        //保存未压缩文件到我们指定的目录下面
        .pipe(gulp.dest('src/css'))
        //给文件添加.min后缀
        .pipe(rename({ suffix: '.min' }))
        //压缩样式文件
        .pipe(minifycss())
        //输出压缩文件到指定目录
        .pipe(gulp.dest('dist/css'))
        //提醒任务完成
        .pipe(notify({ message: 'CSS task complete' }));
});

// Scripts任务
gulp.task('scripts', function() {
    //js代码校验
    return gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        //js代码合并
        //.pipe(concat('all.js'))
        //给文件添加.min后缀
        .pipe(rename({ suffix: '.min' }))
        //压缩脚本文件
        .pipe(uglify())
        //输出压缩文件到指定目录
        .pipe(gulp.dest('dist/js'))
        //提醒任务完成
        .pipe(notify({ message: 'JS task complete' }));
});

// Default task
gulp.task('default', function() {
    gulp.start('styles', 'scripts','watch');
});
// Watch
gulp.task('watch', function() {
    // Watch .scss files
    gulp.watch('src/css/*.scss', ['styles']);
    // Watch .js files
    gulp.watch('src/js/*.js', ['scripts']);
    // Create LiveReload server
    livereload.listen();
    // Watch any files in assets/, reload on change
    gulp.watch(['dist/*']).on('change', livereload.changed);
});



补充gulp插件

自动刷新

可以结合browser-sync做多终端自动刷新，详见BrowserSync前端测试利器

处理html

使用gulp-processhtml
安装：npm install –save-dev gulp-processhtml
在构建时处理按你设想的修改html文件，比如说你构建之前你有N个脚本需要引入到html页面中，构建之后可能这N个文件被合并成了一个，这时候引入的地方也需要做相应的调整，那么差个插件就能派上用场了。
插件使用

gulp.task("processhtml", function () {
    gulp.src('../main.html')
        .pipe(processhtml())
        .pipe(gulp.dest(option.buildPath + '/'))
})

main.html构建之前的代码

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<!-- build:js js/libs/libs.min.js --> <!--process-html插件需要用到这个注释-- >
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular.touch.min.js"></script>
<script src="js/libs/zepto.20140520.js"></script>
<script src="js/libs/angular.ui.bootstrap.js"></script>
<script src="js/libs/angular-sanitize.min.js"></script>
<script src="js/libs/angular-ui-route.min.js"></script>
<script src="js/libs/fastclick.0.6.7.min.js"></script>
<script src="js/libs/carous.min.js"></script>
<!-- /build --> <!--process-html插件需要用到这个注释-->
</html>

main.html构建之后

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/libs/libs.min.js"></script> <!--注意这里的变化-->
</html>

字符串替换（修改文件版本号）

使用gulp-replace
安装：npm install –save-dev gulp-replace
可以替换html或者txt等文件内的字符串为你想要的。
比如我每次构建的时候都需要去修改引用的文件的版本号，就可以使用这个插件

gulp.task("replace", function () {
    var date = new Date().getTime();
    gulp.src('../main.html')
        .pipe(replace(/_VERSION_/gi, date))
        .pipe(gulp.dest(option.buildPath + '/'))
})

main.html文件

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=_VERSION_"/>
    <link rel="stylesheet" href="style/index.css?v=_VERSION_"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=_VERSION_"></script>
<script src="js/app.js?v=_VERSION_"></script>
<script src="js/service/TrackDataService.js?v=_VERSION_"></script>
<script src="js/service/APIService.js?v=_VERSION_"></script>
<script src="js/service/DService.js?v=_VERSION_"></script>
<script src="js/controllers/indexCtrl.js?v=_VERSION_"></script>
<script src="js/directive/lazy.js?v=_VERSION_"></script>
<script src="js/directive/slider.js?v=_VERSION_"></script>
<script src="js/filter/filters.js?v=_VERSION_"></script>
</html>

构建之后，_VERSION_被替换为时间戳。

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=1433405631860"/>
    <link rel="stylesheet" href="style/index.css?v=1433405631860"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=1433405631860"></script>
<script src="js/app.js?v=1433405631860"></script>
<script src="js/service/TrackDataService.js?v=1433405631860"></script>
<script src="js/service/APIService.js?v=1433405631860"></script>
<script src="js/service/DService.js?v=1433405631860"></script>
<script src="js/controllers/indexCtrl.js?v=1433405631860"></script>
<script src="js/directive/lazy.js?v=1433405631860"></script>
<script src="js/directive/slider.js?v=1433405631860"></script>
<script src="js/filter/filters.js?v=1433405631860"></script>
</html>

使用 gulp.dest 复制目录结构

假设我们的目录结构是这样的
├── src/
│     └── vendor/
│            └── jquery.js
└── gulpfile.js

我们需要复制 jquery.js 到 dest 目录, 并保持 jquery.js 原有的目录层次结构

------------------------------

// 一般我们是这样复制文件的
gulp.src('./src/vendor/jquery.js')
    .pipe(gulp.dest('dest'));

但得到的结果不符合我们的预期, 只是单纯的 copy 了文件, 目录结构没有复制过来
├── src/
└── dest/
       └── jquery.js

// 当我们加上 base 参数后
gulp.src('./src/vendor/jquery.js', {base: '.'})
    .pipe(gulp.dest('dest'));

接近我们想要结果了, 连同目录结构都复制了过来
├── src/
└── dest/
       └── src/
              └── vendor/
                     └── jquery.js

// 我们可以再修改下 base 以去掉 src 这一层
gulp.src('./src/vendor/jquery.js', {base: './src'})
    .pipe(gulp.dest('dest'));

最终的结果
├── src/
└── dest/
       └── vendor/
              └── jquery.js
 类似资料：

相关阅读

使用gulp构建前端自动化的方法示例基于Node.js的JavaScript项目构建工具gulp的使用教程详解前端自动化工具gulp自动添加版本号即使安装了npm install -g gulp，也未找到本地gulp安装SciPy构建/安装Mac Osx

相关文章

构力前端MongoDB管理工具京东春招补录前端一面补一发小米前端面经（已oc）盒马前端秋招补录一、二面

相关问答

如何在命令行安装Android SDK构建工具？Ionic Cordova Build Android未找到安装的构建工具安装gulp后：“找不到命令'gulp'”避免为修补程序安装创建安装目录安装了24.0.0版本的构建工具，但gradle没有看到

相关文档

Debian GNU/Linux 安装手册（i386架构）Debian GNU/Linux 安装手册（IA64架构）Debian GNU/Linux 安装手册（PPC架构）前端工程师自我修养从零开始做 Vue 前端架构
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.