下面是今天在配置gulp运行项目时遇到的问题几个问题及其完整的安装过程:

1、安装node.js 。gulp是基于nodejs使用的 查看版本node   -v

2、npm install gulp -g 全局安装gulp(重点)

重点:

3、新建一个项目目录,进入项目目录(cd+项目路径或者找到项目文件shift+鼠标右键->在此处打开命令窗口

4、创建一个模块 npm init      //在项目目录中生成一个package.json

5、本地安装gulp npm install gulp --save-dev(重点)   //全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能

6、安装gulp插件

例如:npm install --save-dev gulp-babel babel-preset-es2015  //es6转es5

  npm install gulp-autoprefixer --save-dev         //css自动添加浏览器前缀(如果报错,就用cnpm重新安装或者重装npm  install gulp或者卸载gulp-autoprefixer后再安装)

一般的安装格式:npm install +<插件名>+  --save-dev

7.安装结束后,gulp运行

注释:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹。 (加载依赖到package.json文件中)
           -save是指将包信息添加到dependencies,表示你发布时依赖的包裹。

删除安装的插件:()

1、全局安装 npm i -g rimraf

2、项目目录 rimraf -rf node _modules/插件名(不带插件名时。全部插件都删除,重装插件需删除依赖再重装)

gulp安装搭建前端项目自动化的更多相关文章

  1. 使用gulp+browser-sync搭建前端项目自动化以及自动刷新

    前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs. ...

  2. 【gulp】gulp + browsersync 构建前端项目自动化工作流

    什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构 ...

  3. 手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台 (Window系统)

    前言 网上教程大多介绍的是Linux系统下SonarQube+Jenkins如何使用,这是因为这两款软件一般都是部署在服务器上,而大多数服务器,采用的都是Linux系统.大多数服务器用Linux的原因 ...

  4. 前端项目自动化构建工具——Webpack入门教程

    参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...

  5. nodejs解压版安装和配置(带有搭建前端项目脚手架)

    nodejs 安装  我先前用了nvm,觉得nvm挺厉害可以随时更换nodejs版本,但是研究了下,可能自己功力不够还是什么,并不好用,中间还出现了错误:所以最后还是卸载了: 本文图文并茂的一步一步的 ...

  6. 使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架

    一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是 ...

  7. 3 分钟轻松搭建 Ruby 项目自动化持续集成

    任何事情超过 90 秒就应该自动化,这是程序员的终极打开方式.Automating shapes smarter future. 这是一篇关于 Ruby 项目持续集成的快速指导教程,教大家如何使用 f ...

  8. 快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)

    现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...

  9. vue-cli安装搭建初始项目

    vue-cli脚手架 前提:node + npm 安装好 一.介绍 vue-cli: Vue + ESLint + webpack + iview + ES6 Vue:主要框架ESLint:帮助我们检 ...

随机推荐

  1. Others

    1.可迭代对象可以被for循环获取 2.可变与不可变对象 不可变对象:数字 字符串 元组 所谓不可变是值和身份都不变          赋值时开辟新内存空间生成新值 可变    对象:列表 字典 集合 ...

  2. Week5——applet

    1.定义 applet是一种Java程序.它一般运行在支持Java的Web浏览器内.因为它有完整的Java API支持,所以applet是一个全功能的Java应用程序. 2.特点(不同于Java  a ...

  3. leveldb源码分析--插入删除流程

    由于网络上对leveldb的分析文章都比较丰富,一些基础概念和模型都介绍得比较多,所以本人就不再对这些概念以专门的篇幅进行介绍,本文主要以代码流程注释的方式. 首先我们从db的插入和删除开始以对整个体 ...

  4. 关于Entity Framework关系配置,提示列名XXXX_Id无效的问题

    问题描述 : 数据库中有两张表,如下: Member(会员)表有外键RoleId,对应的是Role(角色)表的主键Id,业务逻辑是Member表的RoleId必须与Role表的Id对应(但在设计数据表 ...

  5. 理解 Linux 的平均负载和性能监控

      在本文中,我们将解释 Linux 系统中最关键的管理任务之一——关于系统 / CPU 的负载load和平均负载Load average的性能监控. 首先来看所有的类 UNIX 系统中两个重要的表述 ...

  6. 转:eclipse的快捷键

    22 21 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到 ...

  7. 标准的Flask启动文件

    最近有一些同学问了我一些项目结构的问题 所以今天给大家专门讲解 解耦后的项目 目录我会分为两种方式:一种是普通解耦 一种是多mvc解耦 首先 我没先建立我们程序的文件夹并且在这个文件夹内写一个和这个文 ...

  8. 什么时候会执行viewDidLoad方法

    什么时候会执行viewDidLoad方法 这个博文是为了解释,为何有时候,你给属性赋值,在viewDidLoad方法中却取不到值的原因. 第一种情况,presentViewController会执行被 ...

  9. oracle 启动报错ORA-27125解决方案

    脚本: oracle@edwdb:~> id uid=(oracle) gid=(oinstall) (oinstall),(dba) oracle@edwdb:~> su - root ...

  10. JDBC 连接mysql获取中文时的乱码问题

    前段时间学习JDBC,要连接mysql获取数据.按照老师的样例数据,要存一些名字之类的信息,用的都是英文名,我当时就不太想用英文,就把我室友的名字存了进去,嘿嘿,结果,出问题了. 连接数据库语句: s ...