文档章节

glup前端代码打包的使用

路是实践出来的
 路是实践出来的
发布于 2017/03/14 18:19
字数 835
阅读 55
收藏 0

简介

   gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成。使用她可以大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

1、使用gulp的方法:

第一步:安装node.js  

            gulp是基于nodejs,所以需要安装nodejs

第二步:命令行

          node -v查看安装的nodejs版本,出现版本号说明刚才安装成功,不然需要进行重新的安装。

         npm -v  查看npm的版本号,npm是在安装nodejs的时候一同进行安装的

        cd  定位到目录,需要进行代码打包的根目录下其实就定位到,项目的根目录

 第三步:npm 介绍

        npm install cnpm -g --registry=https://registry.npm.taobao.org  安装npm

 第四步:全局安装gulp:

cnpm install gulp -g  进行gulp的安装

gulp -v 查看gulp的版本号

第五步:本地安装gulp插件

安装:定位目录命令后提示符执行cnpm install --save-dev

本示例以gulp-less为例(编译less文件),命令提示符执行cnpm install gulp-less --save-dev

7将会安装在node_modules的gulp-less目录下,该目录下有一个gulp-less的使用帮助文档README.md;

为了能正常使用,我们还得本地安装gulp:cnpm install gulp --save-dev

PS:细心的你可能会发现,我们全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

第六步、新建gulpfile.js文件(重要)

//导入工具包 require('node_modules里对应模块')

var gulp = require('gulp'), //本地安装gulp所用到的地方

    less = require('gulp-less');//压缩的是less文件

//定义一个testLess任务(自定义任务名称),压缩的是less文件

gulp.task('testLess', function () {

    gulp.src('src/less/index.less') //该任务针对的文件

        .pipe(less()) //该任务调用的模块

        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css

});

var uglify = require("gulp-uglify");//压缩的是js文件

var minifyCss = require("gulp-minify-css");//压缩的是css文件

var minifyHtml = require("gulp-minify-html");//压缩的是html文件
var imagemin = require('gulp-imagemin');////压缩的是图片文件

gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务

//gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数

//gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)

//gulp.dest(path[, options]) 处理完后文件生成路径

第七步  进行打包:

在进行nodejs安装的时候,使用npm run 命令 可以查看目前的所有命令。 从而进行打包使用,如果使用 gulp all是使用全局安装进行打包;如果使用 npm run +查看出来的命令则是使用本地打包如

进行命令 npm run +start/all 均是可以进行项目的打包

© 著作权归作者所有

共有 人打赏支持
路是实践出来的
粉丝 2
博文 29
码字总数 9482
作品 0
西安
私信 提问
前端的一些工具和概念、框架

前端目前发展真是百家争鸣热闹的很,也涌现出了大量的框架、工具,下面就是对热门的前端的一个梳理: 1. Node.js:一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Jav...

IT追寻者
2016/06/16
163
0
webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)

webpack算是个磨人的小妖精了。之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下。本来只想玩一下的。尝试打包了以后,就想启个web...

晴天_雨天
2017/06/12
0
0
几个前端自动化工具(一)bower,grunt,gulp,jspm,karmam,webpack

前端有很多包管理工具,除了常见的webpack外还有bower,grunt,gulp,jspm,karma,这里就走马观花的都测试一遍 1 Bower https://bower.io/ 使用方法: 安装bower:npm install bower 使用b...

王小明123
2016/08/01
632
0
记录一个新的开始

明志 一直想有个机会,将自己在IT行业内接触到的知识、技术进行沉淀和整理。苦于时间和精力的不足,一直没有确定下来。今后正式加入简书这个大家庭,将自己在工作中的所学所用,一一整理,方...

JustBeCoder
2017/10/12
0
0
【初学者】openGL的物体转速不一样

就是如下代码里面 MyDisplay()中的第二段for循环的内容执行与否 为什么会影响第一段的物体的转速?不明白 如果把第二段for循环注释了,就会发现转速变了。。。 #include #include #include #...

Michaelwpf
2016/05/17
134
0

没有更多内容

加载失败,请刷新页面

加载更多

jenkins安装

https://my.oschina.net/u/593517/blog/1797968 jenkins 安装 https://my.oschina.net/u/593517/blog/3028175 GIT 安装 https://my.oschina.net/u/593517/blog/3028179 maven 安装 插件安装 ......

Gm_ning
19分钟前
2
0
小言服务端解决方案-监控

框架保证方向,整体包容细节 为保证服务端运行平稳正常,owner应使得系统应保有相应的监控:系统监控,业务监控。而服务运行的平稳高效是否有保障跟监控粒度又成直接的正比关系。本文仅针对开...

重城重楼
31分钟前
1
0
搜索引擎(Elasticsearch搜索详解)

学完本课题,你应达成如下目标: 掌握ES搜索API的规则、用法。 掌握各种查询用法 搜索API 搜索API 端点地址 GET /twitter/_search?q=user:kimchy GET /twitter/tweet,user/_search?q=user:...

这很耳东先生
55分钟前
7
0
浅谈如何减少GC的次数

GC会stop the world。会暂停程序的执行,带来延迟的代价。所以在开发中,我们不希望GC的次数过多。 本文将讨论如何在开发中改善各种细节,从而减少GC的次数。 (1)对象不用时最好显式置为 Nu...

浮躁的码农
56分钟前
1
0
jpa 自定义返回对象

任何ORM框架都少不了开放自定义sql的问题。jpa自然也不例外,很多场景需要写复杂sql的。 首先定义一个方法签名,然后打上@Query注解。像下面这样,需要注意nativeQuery,这个表示query中的字...

朝如青丝暮成雪
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部