前端构建工具:gulp的配置与使用

安装gulp

因为gulp是基于node的管理工具,所以要先安装nodejs
安装nodejs
nodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.org/en/
下载后直接运行.msi文件
安装完成后,打开命令行(win+R)键入node -查看node版本

全局安装gulp

npm install -g gulp

在项目目录下安装gulp,若要在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:
(项目目录下安装gulp打开命令行方式:shift+鼠标右键–>选择在此处打开命令行)

npm install gulp --save-dev

使用gulp -v查看是否成功安装(图左:全局查看gulp是否成功安装,图右:项目目录查看gulp是否成功安装)

使用gulp
创建gulpfile.js文件

var gulp = require(‘gulp‘);
gulp.task(‘default‘,function(){
    console.log(‘hello world‘);
});

创建package.json文件

npm init

运行gulp任务

在项目下打开命令行键入gulp , 执行任务.如下图

项目目录结构

gulpAPI

gulp.src()

用来读取文件

gulp.src(globs[, options])

gulp.dest()

用来写文件

gulp.dest(path[,options])

gulp.task()

用来定义任务

gulp.task(name[, deps], fn)

gulp.watch()

用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。例如

gulp.watch(glob[, opts], tasks)
时间: 2024-07-31 14:20:45

前端构建工具: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.js 简介

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

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

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

前端构建工具gulp

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

前端构建工具gulp使用

因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话如果真是要完整打包上线也不在乎那么几秒时间,对于项目来说线上效率关键,但是线下效率只要不是让人无法忍受页没有太多问题.不过不管怎么说,需要亲自用过gulp之后才能品评他和grunt之间的优劣. 一:安装gulp环境 1. 安装node 在node官方文档下载匹配的版本  我下载的是如下图的版本.http://nodejs.cn/download/ 下载好以后, 可以一

前端构建工具gulp的使用

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

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

参考自:http://segmentfault.com/a/1190000000372547 资源: npm上得gulp组件 gulp的Github主页 官方package.json文档 gulp中文官网 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://node