下面是今天在配置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. org.springframework.data.redis.cache.RedisCacheManager

    org.springframework.data.redis.cache.RedisCacheManager

  2. java 内存分析之static

    源码: 内存分析: 源码: 静态方法:   用static 声明的方法为静态方法,在调用该方法时,不会将对象的引用传递给它,所以在static 方法中不可访问非static 的成员.   可以通过对象 ...

  3. Webservice和EJB

    WebService Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯 ...

  4. python利用unittest进行测试用例执行的几种方式

      利用python进行测试时,测试用例的加载方式有2种:  一种是通过unittest.main()来启动所需测试的测试模块:  一种是添加到testsuite集合中再加载所有的被测试对象,而tes ...

  5. Android UI组件----用相对布局RelativeLayout做一个登陆界面

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  6. hdfs操作手册

    hdfscli 命令行 # hdfscli --help HdfsCLI: a command line interface for HDFS. Usage: hdfscli [interactive ...

  7. Java中的消息框

    JOptionPane.showMessageDialog(newFrame.getContentPane(),"弹出的是消息提示框!", "系统信息", JO ...

  8. 转:c# 安装包制作

    .net Windows服务程序和安装程序制作 最近项目中用到window服务程序,以前没接触过,比较陌生,花了两天的时间学习了下,写了个简单的服务,但在制作安装程序的时候,参照网上很多资料,却都制作 ...

  9. 关于Tomcat端口出现的问题

    =Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. Th ...

  10. September 19th 2017 Week 38th Tuesday

    Live boldly. Push yourself. Don't settle. 勇敢生活,突破自我,永不设限! Don't indulge in the past, whether it was ...