gulp基本配置

tyheist 发布于2019-08-22 13:45 / 2261人阅读

摘要：之前用到用具的时候会习惯把要点记录在云笔记里面，时间一场自己发现下次用的时候那些要点并没有多大的提示效果，有些还是要从新看配置真是惭愧。

之前用到用具的时候会习惯把要点记录在云笔记里面，时间一场自己发现下次用的时候那些要点并没有多大的提示效果，有些还是要从新看配置（真是惭愧）。这才生出写一点文章记录的想法，给需要的同学提供一点帮助，也给自己作为一个学习的笔记。

以下是用gulp对网站静态资源管理的配置过程：

1. 首先确认有node的环境，没有就装一个
    
2. 全局安装 gulp：
    ```
    npm install --global gulp
     ```   
3. 作为项目的开发依赖安装：
    ```
    npm install --save-dev gulp
    ```
4. 安装所需的各种插件（配置文件种说明了各个插件的用途）：
```
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename imagemin --save-dev
```
    
5. 在项目根目录下创建一个名为 gulpfile.js 的文件，文件配置如下:


```
   // 引入 gulp
    var gulp = require("gulp"); 
    
    // 引入组件
    var jshint = require("gulp-jshint"); //js代码校验 
    var sass = require("gulp-sass");    //编译css
    var imagemin = require("gulp-imagemin"); //压缩图片
    var concat = require("gulp-concat");
    var uglify = require("gulp-uglify");
    var rename = require("gulp-rename");    
    
    // 检查脚本
    gulp.task("lint", function() {
        gulp.src("./static/src/js/*.js")
            .pipe(jshint())
            .pipe(jshint.reporter("default"));
    });
    
    // 编译Sass
    gulp.task("sass", function() {
        gulp.src("./static/src/scss/*.scss")
            .pipe(sass())
            .pipe(gulp.dest("./static/dist/css"));
    });
    
    // 压缩图片
    gulp.task("imagemin", function() {
        gulp.src("./static/src/images/*.{png,jpg,gif,ico}")
             .pipe(imagemin({
                optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
                progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
             }))
             .pipe(gulp.dest("./static/dist/images"));
     });
    // 合并，压缩js文件
    gulp.task("scripts", function() {
        gulp.src("./static/src/js/*.js")
            .pipe(concat("all.js"))
            .pipe(gulp.dest("./static/dist/js"))
            .pipe(rename("all.min.js"))
            .pipe(uglify())
            .pipe(gulp.dest("./static/dist/js"));
    });
    
    // 默认任务
    gulp.task("default", function(){
        gulp.run("lint", "sass","imagemin", "scripts");
    
        // 监听文件变化
        gulp.watch([
            "./static/src/scss/*.scss",
            "./static/src/images/**",
            "./static/src/js/*.js"
        ], function(){
            gulp.run("lint", "sass","imagemin", "scripts");
        });
    }); ```

在终端执行 gulp default就可以执行打包任务啦，效果如图：

本例文件目录结构如图：

ps；第一次这在写，在中午休息时间匆匆完成，不对的地方还请指正?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92399.html

前端从零单排之Gulp(第二期)

摘要：是个类似于的前端工作流工具，今天就简单的介绍一下和一些我的使用感受在中安装全局切换到你的前端工作目录下确保你的前端工作目录下有这个文件然后就已经安装好了，马上就可以进入简单的配置了。但是在使用的工作之中会遇到一些问题。 gulp 是个类似于grunt的前端工作流工具，今天就简单的介绍一下gulp和一些我的使用感受 Installing gulp 在Terminal中安装全局gulp...

xiaolinbang 2019-08-21 12:17 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

HmyBmny 2019-08-20 18:12 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

jhhfft 2019-08-29 12:58 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

ysl_unh 2019-08-01 17:12 评论0 收藏0
从零开始创建 angularjs-gulp-es5 项目

摘要：为了动态插入新加的和文件且添加的文件有一定顺序，安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线，继续创建一些。有时间会加入校验添加，添加等等。。。源码地址：https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意，此项目为angular-gulp-seed mkdir angu...

hqman 2019-08-20 12:13 评论0 收藏0