手把手创建gulp

这几天安装gulp踩了不少坑,现在讲解一个入门的案例解析:
==首先大家要确保node、npm、npx、gulp安装是否成功 ==
这些安装都是傻瓜式安装,大家可以找到相应的教材。

创建一个自己的文件夹,通过cmd命令或者手动创建都ok 此处讲解的是mpn全局安装后的

1.cd进入到目标文件夹

    cd cd E:\code\js\gulp02

2.初始化

    npm init

人员如果没有特殊要求,直接默认下一步

3.查看是否出现一个package.json的文件


4.创建一个gulpfile.js在目标文件下面。
==这个文件将是主要代码的存放地==
接下来我们在这个文件下面写出一点测试代码

        function defaultTask(cb) {
    // place code for your default task here
    cb();
  }

  exports.default = defaultTask

5.调试
5.1:在vscode里面调试
首先安装Gulp Tasks这个插件


出现这些代码表示成功。
5.2:在cmd里面调试
在目标文件夹下面输入gulp 或者gulp -tasks(组合任务时输出)

出现这个,代表成功。。。

原文地址:https://www.cnblogs.com/XSdao/p/11618639.html

时间: 2024-10-16 08:19:21

手把手创建gulp的相关文章

手把手创建自定义的分层的maven-archetype

从网络找了很多自定义archetype的文章,都不是自己想要的,因为想创立一个分层的archetype,于是通过分析以及得到的零散的知识,终于完成了,下面每个步骤都会呈现出来. 1.首先创建好一个现有的maven工程,这个工程按照具体情况分了多层,有一个总控pom.xml文件,每层有自己的pom.xml 2.为了不降多余的文件创建进去,先将标红的文件都删除 3.执行命令 4.找到相应的目录,找到生成的jar包 5.将这个jar包上传到私服上 6.自行创建archetype-catalog.xml

手把手创建一个聊天机器人

今天来写一个属于自己的聊天机器人. 思路:当用户点击发送后,需要根据用户输入的内容,提交到服务器,然后由服务器根据你输入的内容,返回对应的结果,我们拿到结果展示到界面上当做机器人的回答即可. 这里使用的接口是图灵机器人,网址:http://www.tuling123.com 1. 搭建界面 界面主要是一个div,div里是一个ul,ul就是聊天面板,每条消息(不管是机器人的还是用户的)都是一个li标签. CSS和HTML代码如下: 1 <div class="chatBox"&g

Gulp新手入门教程

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 在我们深入了解之前,我们先来说说为什么是Gulp. 为什么是Gulp? 类似Gulp的

3. gulp安装和使用

环境 安装gulp和grunt用的都是node 的包管理工具 -npm ,所以你需要先在电脑上安装 node ,这样就能去安装 Gulp 与 Grunt 了.(安装node会自动安装npm,检测安装成功 node -v,  npm -v) 安装 在项目里使用gulp,你得先在全局范围内去安装一下 Gulp 的命令行工具,然后在项目里面再去安装 Gulp.(如果遇到权限问题,在命令前加sudo) npm install -g gulp 进入到项目里面安装一下gulp npm install gul

gulp快速入门

今天刚入职了一家新公司,结果明天就要开始项目了.上级说要用gulp来打包代码,所以今晚花了一晚来看这个gulp, 可以说已经入门了.所以做一个小小的总结 : 首先全局安装gulp npm install gulp -g   然后我在F:/盘新建一个gulpDemo路径, 进入到这里面,在本地再次安装一次gulp,我也不知道为什么本地还要安装.你就装吧,哈哈 不过,在安装之前,确保 gulpDemo 这个文件夹里有package.json 这个文件 这个文件如下: /package.json {

使用gulp实现文件压缩及浏览器热加载

一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载.  先再命令行里输入   npm install gulp -g   下载gulp 二.创建gulp项目 创建一个你需要项目文件夹,然后在根目录输入  npm init  (npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息.比如你用到的各种依赖) 三.使用npm install 安装各种依赖 例:npm install browser-sync--save-dev 这里总

Gulp的学习和使用

Gulp是一种直观.自动化构建的工具. Gulp是基于Node和NPM,安装教程点这里. 什么是Gulp? Gulp使用了node.js的流控制系统,使其(Gulp)构建更快,因为它不需要将临时文件/文件夹写入磁盘. 如果你想了解更多关于流控制系统--这不是必需的--这篇文章页是很值得推荐你们去看的. Gulp允许你去指定你的源文件是哪些,然后用管道的方式传输你的源文件到一堆的插件中进行编译,最后得出你想要的结果,这比Grunt的设置每个插件的输入输出的繁琐操作简单多了. 管道流操作: 我们要修

详解常用的gulp命令

gulp.js是一款自动化构建工具,我们经常使用它在开发过程自动执行常见的任务.gulp.js 是基于 Node.js 构建的,利用 Node.js,可以快速构建项目. 由于gulp使用基于node,所以首先要安装node环境.node.js有很多非常强大的作用,本文主要应用其环境以及把它当成一款包管理器来使用 使用gulp来构建项目,其步骤为: 1.在目录中创建dist文件夹(要发布的代码) src文件夹(开发代码) 2.在根目录下写命令行 初始化:npm init ,此时根目录会出现pack

gulp的使用以及Gulp新手入门教程

Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gu