Gulp如何使用

作者: BrightenSun | 来源:发表于2017-02-07 20:37 被阅读0次

gulp 自动化工具 ->基于node
官网 http://gulpjs.com/

使用Git Bash或点击开始--运行--输入--cmd--切换磁盘

检测环境
node -v
npm -v

初始化
npm init
一顿回车

正式安装gulp
npm install gulp-cli --save-dev 必须写
npm install gulp -g --save-dev 必须写

检测gulp
gulp --version /gulp -v

编写任务文件
gulpfile.js放在根目录下
http://www.npmjs.com 插件添加

压缩和合并
下载插件
npm install gulp-uglify --save-dev //压缩
npm install gulp-concat --save-dev //合并

如果文件中有这些插件直接npm install //自动安装好

启动gulp
gulp 任务名

整个gulp操作结束

gulpfile.js文件内容

//引入插件
    var gulp = require('gulp');
    var uglify = require('gulp-uglify');    //压缩
    var concat = require('gulp-concat');    //合并
 //编写任务

        gulp.task('yasuo-hebing',function(){    //任务名称
            gulp.src('js/**/*.js')          //获取所有的js文件
                .pipe(uglify())             //pipe管道,压缩文件
                .pipe(concat('main.min.js'))        //合并成什么文件
                .pipe(gulp.dest('build'));       //输出对应文件夹中
        })
    gulp.task('default',['yasuo-hebing'])       //设置默认任务名称
//启动gulp
//gitbash gulp 任务名称
//gulp yasuo-hebing

相关文章

  • Gulp-Todo

    Gulp の todo 应用 本节讲解如何使用gulp构建web应用,以此介绍gulp在前端领域中的应用,以tod...

  • Gulp 使用方法(教程一)

    Gulp 官网 目录 Gulp 环境 Gulp 环境 初始化目录结构 安装 gulp gulp 的简单使用 使用 ...

  • 如何使用gulp

    gulp安装 在项目下新建dist(发布上线)和src(本地编辑)文件夹 线下编辑的时候,会把很多功能拆成不同模块...

  • 如何使用GULP?

    1.背景介绍 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而...

  • 如何使用gulp?

    大家好,我是IT修真院深圳分院第01期学员,一枚正直纯洁善良的web程序员。 今天给大家分享一下,修真院官网JS(...

  • Gulp如何使用

    gulp 自动化工具 ->基于node官网 http://gulpjs.com/ 使用Git Bash或...

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • 如何打包发布-Gulp

    如何打包发布-Gulp 压缩 在线压缩工具 https://javascript-minifier.com/ 使用...

  • gulp入门

    安装gulp 安装gulp插件 gulp使用与执行 在目录创建gulpfile.js文件 执行:gulp defa...

  • ① - ES6 项目创建

    任务自动化gulp什么是任务自动化什么是gulpgulp的作用了解如何使用gulp完成任务自动化参考:http:/...

网友评论

    本文标题:Gulp如何使用

    本文链接:https://www.haomeiwen.com/subject/ntvmittx.html