zoukankan      html  css  js  c++  java
  • 实战环境搭建gulp


    实战环境搭建

    1.1环境
    运行环境nodejs
    使用gulp自动化编译scss,js等
    使用bower管理依赖插件
    使用requirejs作为模块加载器
    使用bootstrap css作为样式框架
    依赖jquery,jquery-ui两个库


    1.2项目目录
    node_modules为依赖模块文件
    .bowerrc 为bower配置文件,包含模块安装目录配置
    bower.json为bower配置文件,包含依赖模块等
    gulpfile.js为gulp任务配置文件
    package.json为程序配置文件,包含npm依赖模块等
    Lib为bower.json dependencies中的依赖文件


    -----------------------------------------------------------

    -----------------------------------------------------------


    1.node 环境

    2.安装 git

    3.在git 里面cd 项目目录

    在 cmd 里面执行

    bower install

    或者

    npm install -g bower


    bower init

    然后输入 name 等信息

    一路通

    安装完 项目目录会多了 bower.json

    !!bower init
    -----------------------------------------------------------

    创建配置配件 配置bowe 下载目录(在git执行)
    type null>.bowerrc

    0.

    {
    "directory":"lib"
    }


    然后 在cmd 里面 cd到项目目录 然后 bower init(前面如果执行了 就跳过)

    -----------------------------------------------------------

    4.下载js 后面的 --save-dev 要加

    bower install jquery bootstrap requirejs jquery-ui --save-dev


    (save 加了这个才会有 json配置项版本信息)
    -----------------------------------------------------------

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

    npm install gulp -g
    或者
    cnpm install gulp -g

    这里不要dev

    cnpm install gulp -g

    这个建议用CMD 装

    必须全局安装!!!


    gulp -v


    这里注意 安装成功了 会有两个版本号

    执行:gulp

    -----------------------------------------------------------


    Scss

    Sass

    n个css 变成一个 dist里面


    -----------------------------------------------------------

    配置 推荐用CMD


    cnpm init


    安装

    cnpm install gulp-connect --save-dev

    cnpm install gulp-webserver --save-dev


    cnpm install gulp-sass --save-dev


    cnpm install gulp-minify-css --save-dev


    cnpm install gulp-cssimport --save-dev


    cnpm install gulp-concat --save-dev


    cnpm install gulp-notify --save-dev


    cnpm install gulp-livereload --save-dev

    都装完了

    package.json 这个文件会写入配置文件

    gulp

    cnpm install gulp-cssimport --save-dev

    -----------------------------------------------------------
    Local gulp not found in F:demoxmxh
    [16:02:54] Try running: npm install gulp


    搭建一半 失败了 先放下


    搭建两个


    一个前台的服务 后台的服务

    node_modules/gulp/bin/gulp.js

    36.22


    at Object.Module._extensions..node (module.js:681:18)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at module.exports (F:severdemo ode_modules\_node-sass@4.8.3@node-sasslibinding.js:19:10)
    at Object.<anonymous> (F:severdemo ode_modules\_node-sass@4.8.3@node-sasslibindex.js:14:35)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)

    _node-sass@4.8.3@node-sassvendorwin32-x64-57inding.node is not a valid Win32 ap

    sass 的问题


    1:11 58

    gulp

    报错


    https://www.zhihu.com/question/33552192


    `sudo npm install gulp -g` 就好了(全局安装,虽然能解决你的问题,但是一般我不这么用)。比较好的做法是,首先创建 package.json 文件,然后如你图中所示,`npm install gulp --save-dev`,这样会把 gulp 安装到当前目录下 node_modules 目录下。同时一个 gulp 的 executable 会被安装到 ./node_modules/.bin 下。此时你执行 。./node_modules/.bin/gulp 即可。这种方法比全局安装要好,因为用到的 gulp 的版本只和当前项目相关。如果觉得每次输入 ./node_modules/gulp 复杂,那么你在 package.json 中得 scripts 段落添加诸如 {"build": "gulp" },然后每次在工程目录执行 npm build 即可。npm 运行脚本时,会自动到 ./node_modules/.bin 下查找对应的可执行文件。

    作者:沈嵘
    链接:https://www.zhihu.com/question/33552192/answer/56803638
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


    ----------------------------------------


    npm install gulp --save-dev


    作者:春雷
    链接:https://www.zhihu.com/question/33552192/answer/65615013
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    我也是刚刚在尝试gulp(第1天),遇到了同样的问题,说一下解决的办法。我是在ubuntu14.04中,不同的环境情况可能不完全一样。不赞成 sudo npm install gulp -g 的全局安装,因为后期gulp会在自动引入项目相关的支持包,如果全局安装gulp,这些支持包全都安装在/usr/local/lib/node_modules/下,不利于管理,可能易引起冲突。应使用 $npm install --save-dev gulp 在项目中安装,gulp安装好的路径是项目下的 node_modules ,执行 glup时可使用指令:$node_modules/gulp/bin/gulp.js 如果觉得这样很麻烦,可用ln命令在项目路径下建立快捷方式:$ln -s node_modules/gulp/bin/gulp.js gulp$./gulp即可。============= 无耻的分隔线 =============时隔1个月之后,再次对 gulp 进一步系统地学习(这也是接触 gulp 的第二天)。这里谈一下全局安装遇到的奇怪问题,如下:按照 @桂子 提到的文章 nodejs 中的 NODE_PATH 一文,我设置了 NODE_PATH 和 npm prefix,设置好后,奇怪的事情发生了。在项目路径内执行 gulp ,系统仍然提示要求 npm install gulp ,也就是说仍然要求在项目内安装,即使执行$ /usr/local/lib/node_modules/gulp/bin/gulp.js 也仍然要求本地安装。这倒不奇怪,奇怪的是我更进一步的尝试发现,当在 /usr/local/lib 路径中调用 gulp 时,系统提示 “没有找到 gulpfile 文件”,说明路径已被认可了;而在其外一层路径中,就仍然要求本地安装gulp。请教,这是什么鬼?


    cnpm install --save-dev gulp

    npm install --save-dev gulp


    lodash._basecopy

    cnpm install gulp-livereload --save-dev

    npm install gulp (这样可以 不要全局安装 全局安装会出问题)

    真TM贱 gulp 不能全局安装

    ----------------------------------------

    https://stackoverflow.com/questions/27431187/cannot-find-module-lodash

  • 相关阅读:
    go案例:客户管理系统流程 mvc模式 分层设计
    珠峰2016,第9期 vue.js 笔记部份
    前后端分离电商,业务逻辑部份
    'Specifying a namespace in include() without providing an app_name '报错解决
    vue2.0 前端框架
    vue项目实战
    电商网前后端分离数据表设计部份
    djang2.1教育平台02
    django框架开发流程
    测试的艺术:测试用例的设计
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/9737385.html
Copyright © 2011-2022 走看看