前端构建工具gulp使用

因为之前一直有人给我推荐gulp,说他这里好哪里好的。实际上对我来说够用就行。grunt熟悉以后实际上他的配置也不难,说到效率的话如果真是要完整打包上线也不在乎那么几秒时间,对于项目来说线上效率关键,但是线下效率只要不是让人无法忍受页没有太多问题。不过不管怎么说,需要亲自用过gulp之后才能品评他和grunt之间的优劣。

一:安装gulp环境

  1. 安装node

    在node官方文档下载匹配的版本  我下载的是如下图的版本。http://nodejs.cn/download/

    

  下载好以后, 可以一直点击下一步,进行默认安装

  

  安装好以后,在控制台输入cmd,打开命令提示符,输入node -v  查看node是否安装成功以及node的版本。

  

  2.全局安装gulp

    在命令提示符中时输入 npm install gulp -g

    

二:项目流程

  1.生成项目所需的package.json文件

    比如:我的本地项目放在D:\maxiaodan\project\webapp这个目录下,找到这个目录,在地址栏输入cmd,或者通过cd命令,进入项目的目录。

    输入npm init ,一直按enter键,自动生成package.json文件(一个node package有2中依赖,一种是dependencies:依赖的项是正常运行该包时所需要的依赖项。一种是devDependencies:开发时需要的依赖项,像一些单元测试之类的包。如果只是单纯的使用这个包而不需要进行一些改动测试之类的,可以只安装dependencies)

    

    生成的package.json文件如下图所示:

    

  2.项目根目录下安装gulp

    只安装dependencies      npm install gulp --save

    安装devDependencies     npm install gulp --save-dev

    执行命令npm install gulp --save  安装gulp ,完成后 会在项目根目录下生成一个node_modules的文件夹

  3.安装项目所需要的插件

    npm install del --save     删除文件

    npm install gulp-jshint --save    js代码检查插件

    npm install gulp-concat --save   合并代码

    npm install gulp-util --save    最基础的工具

    npm install gulp-sequence --save   控制多个任务进行顺序执行或并行执行。

    安装的过程中,可能会遇到这样的提示

    

    我们可以重新进行安装,将这个插件安装位1.0+的版本

    执行命令npm install [email protected]* --save

  4.配置项目的gulpfile.js文件

    在项目的根目录下新建一下gulpfile.js文件

    

    

    配置好以后,命令提示中执行gulp,即输入gulp

    

    会出现如上图的结果,是不正确的

    重新安装del插件,版本安装为1.0+的 ,再次执行gulp,就会显示成功

    

    执行完gulp以后,你会发现,在你的项目目录下,会自动生成一个dist的文件夹,里面有一个index.js的文件

    

    

    我们在项目下面新建一个文件夹,存放js文件

    

   需要注意的是:在html中,只需要引入dist文件夹中的index.js即可。

   每当你修改完js文件以后,在控制台输入gulp进行打包,gulp都会把atae文件夹里面所有的.js文件全都打包到dist文件夹中的index.js文件中。所以你的html文件只需要引入index.js文件即可。

   每修改一次,就要自己手动编译一次,太过于麻烦了。我们可以稍微改动一下gulpfile.js文件,监听js文件的变化,只要有js文件有改动,自动进行编译,而不需要用户手动去编译。

    

    再次执行gulp,会发现控制台的鼠标光标,一直停留在最后

    

    每当js文件有改动的时候,控制台都会自动进行编译。同时,如果js文件有错误的话,控制台会实时的提供错误的信息,并且dist文件内的index.js文件不会生成

    

另:如果觉得index.js这个文件名不好的话,可以自己进行修改,同时修改package.json文件夹中的index.js和gulpfile.js文件夹中index.js即可。

时间: 2024-10-20 12:43:53

前端构建工具gulp使用的相关文章

记学习前端构建工具gulp的过程,略心酸

初学前端的时候就听过友人说,前端不好学,很多软件都是要自己下载安装插件的,当时是很不以为然的,不就是下载几个软件外加安装插件吗?!怎么会很难呢!后面才发现自己真的错了. 今天刚好准备好好看看前端构建工具gulp的使用,于是乎就各种上网查资料.刚开始的时候有点摸不着头脑,这个东西不是一个软件,拿来就用,需要自己配置环境,自己根据需求安装package,完全是自己DIY的一个工具. 下面就把整个安装过程,记录下来,方便以后查看吧. 先明确几个概念:1.gulp是基于node.js环境下工作的:2.命

(转载)前端构建工具gulp使用

前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原

(转)前端构建工具gulp入门教程

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,

前端构建工具gulp.js的使用介绍及技巧

一.gulp的安装 1.首先确保已经安装了node.js的环境,然后以全局的方式安装gulp 全局安装gulp--->>>npm install -g gulp 2.全局安装后,切换到gulp项目中在单独安装一次,将目录切换到gulp项目中去 局域安装gulp--->>>npm install gulp 3.安装依赖,即在安装的时候把gulp写进项目package.json文件的依赖中 npm install --save-dev gulp 二.开始使用gulp 1.和

自动化前端构建工具--gulp

Gulp是一个基于任务的javascript工程命令行流式构建工具.为什么要用Gulp呢?前端开发进入到工程化阶段,我们需要压缩合并文件,加MD5戳:如果使用 CoffeeScript/ES6 去代替 Javascript,那么需要编译成jacascript:如果使用less或者sass,需要编译成css.所有的这些操作,在修改文件后,都要重新执行一遍,非常的繁琐.Gulp就是为我们完成这一套重复而机械的工作的.他可以在自动检测文件,每次发生修改,自动编译打包等. 下面介绍用法. 首先安装gul

“流式”前端构建工具——gulp.js 简介

Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什么使得 gulp.js 备受关注呢? Grunt 之殇 gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一责任原则.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一

前端构建工具gulp

前段时间做一个项目,试着用gulp来构建前端代码.今天简单总结了一下: 一:安装gulp环境 1. 安装node 在node官方文档下载匹配的版本  我下载的是如下图的版本.http://nodejs.cn/download/ 下载好以后, 可以一直点击下一步,进行默认安装 安装好以后,在控制台输入cmd,打开命令提示符,输入node -v  查看node是否安装成功以及node的版本. 2.全局安装gulp 在命令提示符中时输入 npm install gulp -g 二:项目流程 1.生成项

前端构建工具gulp的使用

前言:之前一直说着做项目的时候要用gulp ,webpack,结果实习后一直用thinkphp之后就不怎么接触,不会用gulp/webpack,总觉得不是一个合格的前端开发工作者呀! 最近做毕设用的是nodejs 的express,gulp使用的是nodejs中stream来读取和操作数据,所以有nodejs的基础的话,gulp非常容易理解 一,gulp的安装 首先要确保安装好了nodejs的环境,然后以全局的方式安装gulp npm install -g gulp 全局安装后,还要在每个要使用

【转载】前端构建工具gulp入门教程

文章出自:http://segmentfault.com/a/1190000000372547 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,就一切准备就绪.npm会随着安装