gulp、sass、ionic-------安裝

紀錄安裝流程,沒有太多說明

gulp

用途 : 目前安裝gulp只是要使用sass跟gulp的webserver

  1. 安裝node.js
  2. cli 輸入:

npm install -g gulp

  1. cd 到專案目錄後輸入:

npm init

  1. 然後再輸入:

npm install gulp -save-dev

  1. 裝 gulp-webserver 輸入:

npm install gulp-webserver -save-dev

  1. 在專案目錄底下增加一個gulpfile.js, 內容為:

var gulp = require('gulp');
var webserver = require('gulp-webserver');
gulp.task('webserver', function() {
gulp.src('./app/')
.pipe(webserver({
port:1234,
livereload: true,
directoryListing: false,
open: true,
fallback: 'index.html'
}));
});
gulp.task('default',['webserver']);

  1. 在cli 輸入 gulp 就會執行了,也會開啟瀏覽器

sass

  1. 安裝ruby
  2. cli 安裝 gulp-sass 輸入:

npm install gulp-sass --save-dev

  1. 在 gulpfile.js (設定sass,css的目錄)

var gulp = require('gulp'), // 載入 gulp
gulpSass = require('gulp-sass'); // 載入 gulp-sass
gulp.task('styles', function () {
gulp.src('sass/style.sass') // 指定要處理的 Sass 檔案目錄
.pipe(gulpSass()) // 編譯 Sass
.pipe(gulp.dest('css')); // 指定編譯後的 css 檔案目錄
});

  1. 在cli 執行 gulp styles (styles指的是task的名字 )

ionic

  1. cli 安裝ionic

npm install -g ionic cordova

  1. 開個ionic的專案

ionic start 專案名

start的時候它會問說要挑哪個template

  1. cd 到專案目錄

cd 專案名

  1. 執行 輸入:

ionic serve

其他相關ionic文件

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,506评论 1 32
  • Pines Cheng’s Blog awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致...
    大前端之路阅读 2,312评论 0 12
  • awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程。 被老...
    Pines_Cheng阅读 5,567评论 10 117
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 960评论 0 1
  • 作业一:计算两个班的人数 作业二:取余运算 作业三:求差值 作业四:输出操作
    卖加特林的军火商阅读 133评论 0 0