zoukankan      html  css  js  c++  java
  • [如何在Mac下使用gulp] 1.创建项目及安装gulp

    1.创建项目

    2.安装gulp

    3.创建gulpfile.js文件

    4.运行gulp

    创建项目

    -创建项目文件夹命名为firstGulp,并在firstGulp目录下运行 npm init 。npm init 会创建packjson文件,用于保存与项目有关的文件信息。创建步骤直接按回车跳过就好。

    绿色部分需要我们根据项目自身情况手动输入 ,也可设置为空。红色部分是最终生成的内容。

    -当然在最后,需要手动确认信息。确认之后,会在firstGulp项目目录下生成一个packjson.json文件

     -确认之后,在firstGulp目录下生成的packjson.json文件如下。

    {
      "name": "none",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

    2.安装gulp

    在安装gulp之前,一起来梳理下几个问题。

    2.1 什么是全局安装?

    在项目目录中执行以下命令:

    npm install gulp -g  或者 npm install gulp --global

    全局环境下安装gulp,目的在于能够在命令行中使用gulp命令执行gulp。

    通过npm  root -g 查看在全局环境下安装的路径:

    /usr/local/lib/node_modules

    2.2 什么是本地安装?

    在项目目录中执行以下命令:

    npm install gulp 或者 npm install gulp --save-dev 或者 npm install gulp --save
    npm install gulp --save     自动把模块和版本号添加到packjson.json文件中的dependencies部分
    npm install gulp --save-dev 自动把模块和版本号添加到packjson.json文件中的devdependencies部分


    2.3 什么要先全局安装再本地安装?

      -全局安装是为了可以通过命令行执行gulp命令。而且如果有多个项目都需要使用gulp,只需要全局安装一次即可。

      -根据项目情况,我们一般会选取gulp插件通过require()的方式引入到gulpfile.js中,如果只使用全局安装,需要手动配置路径来解决模块引入问题。通过在本地安装gulp可以很好的解决这个问题。

      -本地安装可以让每个项目都有一个独立的包,并且组织各个包之间的依赖。不受全局包的影响。换句话说,如果只在全局安转gulp,那么会造成多个项目共用同一个版本的gulp。

      -方便项目的打包,复制等操作。 

    执行后 npm install gulp --save-dev packjson.json内容变换 如下:

    {
        "name": "none",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
           "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
           "gulp": "^3.9.1"  //自动把模块和版本号添加到packjson.json文件中的devdependencies部分

        }

    }

     3.创建gulpfile.js文件

    var gulp = require("gulp");//引入本地安装的 gulp模块

    gulp.task("default",function(){//default 为默认任务名,这种情况只需要在命令行中输入 gulp即可。 如果有特定的taskName,需要在命令行中实行 gulp taskName
      console.log("hi, gulp")
    })

     -gulpfile.js将作为gulp的主文件负责执行在其中定义的任务。

    4.运行gulp

    gulp  =>输出 “hi,gulp”
  • 相关阅读:
    开始学习编写用于 Windows SideShow 设备的小工具【转】
    Windows Mobile 6.5 Developer Tool Kit 下载
    Microsoft Security Essentials 微软免费杀毒软件下载
    SQL Server 2008 空间数据存储摘抄(SRID 点 MultiPoint LineString MultiLineString 多边形 MultiPolygon GeometryCollection)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (2)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (4)
    负载测试、压力测试和性能测试的异同
    Windows Server 2008 Vista Sidebar Gadget (侧边栏小工具) 入门开发实例
    Silverlight Tools 安装失败 解决办法
    SQL Server 2008 空间数据库 空间索引概念及创建(取自帮助)
  • 原文地址:https://www.cnblogs.com/mrdooo/p/6361206.html
Copyright © 2011-2022 走看看