gulp 入门教程

Posted 2020-08-02 H°pursuit

gulp：自动化项目的构建利器。

　　—— 网站资源优化

　　—— 重复任务自动完成：javascript | coffee | sass | less | html | image | css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

　　—— pipe 思想：前一级的输出直接变成后一级的输入。

 

1. 安装 node

　　https://nodejs.org/en/

　　// 下载，直接运行程序

 

2. 使用命令行

　　cmd --> node -v | npm -v

　　// 显示版本号，安装成功

 

3. 定位到项目

　　cd --> 定位到目录

　　ls --> 列出文件列表

 

4. 安装 gulp

　　4.1 sudo npm install -g gulp

　　　　// sudo --> 以管理员身份执行命令

　　　　// npm --> 安装 node 模块的工具，执行 install 命令

　　　　// -g --> 在全局环境安装，以便任何项目都能使用

　　　　// gulp --> 将要安装的 node 模块的名字

 

　　4.2 gulp -v

　　　　// 查看 gulp 的版本号，确保 gulp 已经被正确安装

 

　　4.3 将 gulp 安装到项目本地

　　　　npm install --save-dev gulp

　　　　// --save-dev --> 更新 package.json 文件，更新 devDependencies 值，表明项目需要依赖 gulp

 

5. 新建 Gulpfile 文件，运行 gulp

　　检查 JavaScript | 编译 Sass 或 Less 文件 | 合并 JavaScript | 压缩并重命名合并后的 JavaScript

　　

　　5.1 安装依赖

　　　　npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

　　　　// 如若以上命令提示权限错误，添加 sudo 再次尝试

 

　　5.2 新建 gulpfile 文件

　　　　// 指定 gulp 需要完成什么任务

　　　　// task | run | watch | src | dest

　　　　// 项目根目录新建一个 gulpfile.js

// 引入 gulp
var gulp = require(‘gulp‘);

// 引入组件
var jshint = require(‘gulp-jshint‘);
var sass = require(‘gulp-sass‘);
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);
var rename = require(‘gulp-rename‘);

// 检查脚本
gulp.task(‘lint‘, function(){
   gulp.src(‘./js/*.js‘)
         .pipe(jshint())
         .pipe(jshint.reporter(‘default‘));
});

// 编译 sass
gulp.task(‘sass‘, function(){
    gulp.src(‘./scss/*.scss‘)
         .pipe(sass())
         .pipe(gulp.dest(‘./css‘));
});

// 合并，压缩文件
gulp.task(‘scripts‘, function(){
    gulp.src(‘./js/*.js‘)
         .pipe(concat(‘all.js‘))
         .pipe(gulp.dest(‘./dist‘))
         .pipe(rename(‘all.min.js‘))
         .pipe(uglity())
         .pipe(gulp.dest(‘./dist‘));
});

// 默认任务
gulp.task(‘default‘, function(){
    gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);

    // 监听文件变化
    gulp.watch(‘./js/*.js‘, function(){
        gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);
    });
});

　　　　// 运行 gulp 任务

　　　　gulp | gulp <task name>