28 | 
29 |
30 |
31 |
29 |
32 |
47 |
48 |
51 |
52 |
55 |
56 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/app/src/javascripts/animation-control.js:
--------------------------------------------------------------------------------
1 | var $ = require('jquery');
2 |
3 | module.exports = {
4 | initAnimationItems: function() {
5 | $('.animated').each(function () {
6 | var aniDuration, aniDelay;
7 |
8 | $(this).attr('data-origin-class', $(this).attr('class'));
9 |
10 | aniDuration = $(this).data('ani-duration');
11 | aniDelay = $(this).data('ani-delay');
12 |
13 | $(this).css({
14 | 'visibility': 'hidden',
15 | 'animation-duration': aniDuration,
16 | '-webkit-animation-duration': aniDuration,
17 | 'animation-delay': aniDelay,
18 | '-webkit-animation-delay': aniDelay
19 | });
20 | });
21 | },
22 |
23 | playAnimation: function (swiper) {
24 | this.clearAnimation();
25 |
26 | var aniItems = swiper.slides[swiper.activeIndex].querySelectorAll('.animated');
27 |
28 | $(aniItems).each(function () {
29 | var aniName;
30 | $(this).css({ 'visibility': 'visible' });
31 | aniName = $(this).data('ani-name');
32 | $(this).addClass(aniName);
33 | });
34 | },
35 |
36 | clearAnimation: function () {
37 | $('.animated').each(function () {
38 | $(this).css({ 'visibility': 'hidden' });
39 | $(this).attr('class', $(this).data('origin-class'));
40 | });
41 | }
42 | };
--------------------------------------------------------------------------------
/app/src/javascripts/main.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | 'use strict';
3 |
4 | // load dependencies
5 | var animationControl = require('./animation-control.js');
6 |
7 |
8 | $(document).ready(function () {
9 | var bgMusic = $('audio').get(0);
10 | var $btnMusic = $('.btn-music');
11 | var $upArrow = $('.up-arrow');
12 |
13 | // background music control
14 | $btnMusic.click(function () {
15 | if (bgMusic.paused) {
16 | bgMusic.play();
17 | $(this).removeClass('paused');
18 | } else {
19 | bgMusic.pause();
20 | $(this).addClass('paused');
21 | }
22 | });
23 |
24 | // init Swiper
25 | new Swiper('.swiper-container', {
26 | mousewheelControl: true,
27 | effect: 'coverflow', // slide, fade, coverflow or flip
28 | speed: 400,
29 | direction: 'vertical',
30 | fade: {
31 | crossFade: false
32 | },
33 | coverflow: {
34 | rotate: 100,
35 | stretch: 0,
36 | depth: 300,
37 | modifier: 1,
38 | slideShadows: false // do disable shadows for better performance
39 | },
40 | flip: {
41 | limitRotation: true,
42 | slideShadows: false // do disable shadows for better performance
43 | },
44 | onInit: function (swiper) {
45 | animationControl.initAnimationItems(); // get items ready for animations
46 | animationControl.playAnimation(swiper); // play animations of the first slide
47 | },
48 | onTransitionStart: function (swiper) { // on the last slide, hide .btn-swipe
49 | if (swiper.activeIndex === swiper.slides.length - 1) {
50 | $upArrow.hide();
51 | } else {
52 | $upArrow.show();
53 | }
54 | },
55 | onTransitionEnd: function (swiper) { // play animations of the current slide
56 | animationControl.playAnimation(swiper);
57 | },
58 | onTouchStart: function (swiper, event) { // mobile devices don't allow audios to play automatically, it has to be triggered by a user event(click / touch).
59 | if (!$btnMusic.hasClass('paused') && bgMusic.paused) {
60 | bgMusic.play();
61 | }
62 | }
63 | });
64 |
65 | // hide loading animation since everything is ready
66 | $('.loading-overlay').slideUp();
67 | });
68 | })();
69 |
--------------------------------------------------------------------------------
/app/src/scss/base/_base.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | html {
4 | width: 100%;
5 | height: 100%;
6 | position: relative;
7 | background-color: #000;
8 | font-size: 16px;
9 | }
10 |
11 | @media all and (min-width: 400px) {
12 | html {
13 | font-size: 22px;
14 | }
15 | }
16 |
17 | @media all and (min-width: 600px) {
18 | html {
19 | font-size: 32px;
20 | }
21 | }
22 |
23 | body {
24 | width: 100%;
25 | height: 100%;
26 | position: relative;
27 | }
--------------------------------------------------------------------------------
/app/src/scss/base/_reset.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | button, input, textarea, select {
8 | outline: none;
9 | }
10 |
11 | button, a {
12 | -webkit-tap-highlight-color: rgba(0,0,0,0);
13 | }
--------------------------------------------------------------------------------
/app/src/scss/components/_btn-music.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | .btn-music {
4 | width: 2rem;
5 | height: 2rem;
6 | background-color: transparent;
7 | position: fixed;
8 | top: 1.5rem;
9 | right: 1.5rem;
10 | z-index: 999;
11 | border: 0.125rem solid #fff;
12 | border-radius: 50%;
13 | padding: 0;
14 | animation: btnMusicAni 3s infinite linear;
15 | i {
16 | width: 2rem;
17 | height: 2rem;
18 | text-align: center;
19 | line-height: 2rem;
20 | color: #fff;
21 | font-size: 1rem;
22 | position: absolute;
23 | top: -0.125rem;
24 | left: -0.125rem;
25 | }
26 | &.paused {
27 | opacity: 0.4;
28 | animation: none;
29 | }
30 | }
31 |
32 | @keyframes btnMusicAni {
33 | 0% {
34 | transform: rotate(0deg);
35 | }
36 |
37 | 100% {
38 | transform: rotate(360deg);
39 | }
40 | }
--------------------------------------------------------------------------------
/app/src/scss/components/_icon-font.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'my-custom-icon-font';
3 | src: url('../fonts/my-custom-icon-font.eot?90099692');
4 | src: url('../fonts/my-custom-icon-font.eot?90099692#iefix') format('embedded-opentype'),
5 | url('../fonts/my-custom-icon-font.woff?90099692') format('woff'),
6 | url('../fonts/my-custom-icon-font.ttf?90099692') format('truetype'),
7 | url('../fonts/my-custom-icon-font.svg?90099692#my-custom-icon-font') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
12 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
13 | /*
14 | @media screen and (-webkit-min-device-pixel-ratio:0) {
15 | @font-face {
16 | font-family: 'my-custom-icon-font';
17 | src: url('../font/my-custom-icon-font.svg?90099692#my-custom-icon-font') format('svg');
18 | }
19 | }
20 | */
21 |
22 | [class^="icon-"]:before, [class*=" icon-"]:before {
23 | font-family: "my-custom-icon-font";
24 | font-style: normal;
25 | font-weight: normal;
26 | speak: none;
27 |
28 | display: inline-block;
29 | text-decoration: inherit;
30 | width: 1em;
31 | margin-right: .2em;
32 | text-align: center;
33 | /* opacity: .8; */
34 |
35 | /* For safety - reset parent styles, that can break glyph codes*/
36 | font-variant: normal;
37 | text-transform: none;
38 |
39 | /* fix buttons height, for twitter bootstrap */
40 | line-height: 1em;
41 |
42 | /* Animation center compensation - margins should be symmetric */
43 | /* remove if not needed */
44 | margin-left: .2em;
45 |
46 | /* you can be more comfortable with increased icons size */
47 | /* font-size: 120%; */
48 |
49 | /* Font smoothing. That was taken from TWBS */
50 | -webkit-font-smoothing: antialiased;
51 | -moz-osx-font-smoothing: grayscale;
52 |
53 | /* Uncomment for 3D effect */
54 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
55 | }
56 |
57 | .icon-note:before { content: '\e800'; } /* '' */
58 | .icon-angle-double-up:before { content: '\e801'; } /* '' */
--------------------------------------------------------------------------------
/app/src/scss/components/_loading-overlay.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | .loading-overlay {
4 | position: fixed;
5 | width: 100%;
6 | height: 100%;
7 | background-color: #000;
8 | z-index: 9999;
9 | img {
10 | width: 10rem;
11 | height: 10rem;
12 | margin: auto;
13 | position: absolute;
14 | top: 0;
15 | bottom: 0;
16 | left: 0;
17 | right: 0;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/app/src/scss/components/_swiper-container.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | .swiper-container {
4 | width: 100%;
5 | height: 100%;
6 | }
--------------------------------------------------------------------------------
/app/src/scss/components/_swiper-slide.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | .swiper-slide {
4 | overflow: hidden;
5 | background-size: cover;
6 | background-position: center;
7 | background-repeat: no-repeat;
8 | }
--------------------------------------------------------------------------------
/app/src/scss/components/_up-arrow.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | .up-arrow {
4 | width: 2rem;
5 | height: 2rem;
6 | position: fixed;
7 | bottom: 2rem;
8 | left: 50%;
9 | transform: translate3d(-50%, 0, 0);
10 | z-index: 999;
11 | background: none;
12 | border: none;
13 | padding: 0;
14 | animation: upArrowAni 2s infinite linear;
15 | i {
16 | width: 2rem;
17 | height: 2rem;
18 | text-align: center;
19 | line-height: 2rem;
20 | color: #fff;
21 | font-size: 1.5rem;
22 | }
23 | }
24 |
25 | @keyframes upArrowAni {
26 | 0% {
27 | opacity: 0;
28 | transform: translate3d(-50%, 30%, 0);
29 | }
30 |
31 | 30% {
32 | opacity: 1;
33 | transform: translate3d(-50%, -20%, 0);
34 | }
35 |
36 | 60% {
37 | opacity: 0;
38 | transform: translate3d(-50%, -35%, 0);
39 | }
40 |
41 | 100% {
42 | opacity: 0;
43 | transform: translate3d(-50%, -50%, 0);
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/app/src/scss/helpers/_functions.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
--------------------------------------------------------------------------------
/app/src/scss/helpers/_global-variables.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
--------------------------------------------------------------------------------
/app/src/scss/helpers/_mixins.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
--------------------------------------------------------------------------------
/app/src/scss/main.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | // helpers
4 | @import "helpers/global-variables";
5 | @import "helpers/mixins";
6 | @import "helpers/functions";
7 |
8 | // base
9 | @import "base/reset";
10 | @import "base/base";
11 |
12 | // components
13 | @import "components/loading-overlay";
14 | @import "components/btn-music";
15 | @import "components/up-arrow";
16 | @import "components/swiper-container";
17 | @import "components/swiper-slide";
18 | @import "components/icon-font";
19 |
20 | // sections
21 | @import "slides/slide-1";
22 | @import "slides/slide-2";
23 | @import "slides/slide-3";
24 |
--------------------------------------------------------------------------------
/app/src/scss/slides/_slide-1.scss:
--------------------------------------------------------------------------------
1 | .slide-1 {
2 | background-color: #e88a63;
3 | .item-image {
4 | width: 18rem;
5 | height: 18rem;
6 | background-position: center;
7 | background-size: contain;
8 | background-repeat: no-repeat;
9 | position: absolute;
10 | top: 4rem;
11 | left: 0;
12 | right: 0;
13 | margin: auto;
14 | background-image: url('../images/github-1.png');
15 | }
16 | .item-text {
17 | width: 18rem;
18 | color: #fff;
19 | font-size: 1.2rem;
20 | font-weight: bold;
21 | position: absolute;
22 | top: 24rem;
23 | left: 0;
24 | right: 0;
25 | margin: 0 auto;
26 | text-align: center;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/app/src/scss/slides/_slide-2.scss:
--------------------------------------------------------------------------------
1 | .slide-2 {
2 | background-color: #5cc2f1;
3 | .item-image {
4 | width: 18rem;
5 | height: 18rem;
6 | background-position: center;
7 | background-size: contain;
8 | background-repeat: no-repeat;
9 | position: absolute;
10 | top: 4rem;
11 | left: 0;
12 | right: 0;
13 | margin: auto;
14 | background-image: url('../images/github-2.png');
15 | }
16 | .item-text {
17 | width: 18rem;
18 | color: #fff;
19 | font-size: 1.2rem;
20 | font-weight: bold;
21 | position: absolute;
22 | top: 24rem;
23 | left: 0;
24 | right: 0;
25 | margin: 0 auto;
26 | text-align: center;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/app/src/scss/slides/_slide-3.scss:
--------------------------------------------------------------------------------
1 | .slide-3 {
2 | background-color: #9993c1;
3 | .item-image {
4 | width: 18rem;
5 | height: 18rem;
6 | background-position: center;
7 | background-size: contain;
8 | background-repeat: no-repeat;
9 | position: absolute;
10 | top: 4rem;
11 | left: 0;
12 | right: 0;
13 | margin: auto;
14 | background-image: url('../images/github-3.png');
15 | }
16 | .item-text {
17 | width: 18rem;
18 | color: #fff;
19 | font-size: 1.2rem;
20 | font-weight: bold;
21 | position: absolute;
22 | top: 24rem;
23 | left: 0;
24 | right: 0;
25 | margin: 0 auto;
26 | text-align: center;
27 | }
28 | }
--------------------------------------------------------------------------------
/config/vendors.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | stylesheets: [
3 | 'node_modules/normalize.css/normalize.css',
4 | 'node_modules/swiper/dist/css/swiper.css',
5 | 'node_modules/animate.css/animate.css',
6 | // if you need font-awesome
7 | // node_modules/font-awesome/css/font-awesome.css
8 |
9 | ],
10 |
11 | javascripts: [
12 | 'node_modules/jquery/dist/jquery.js',
13 | 'node_modules/swiper/dist/js/swiper.jquery.umd.js'
14 | ],
15 |
16 | fonts: [
17 | // if you need font-awesome
18 | // 'node_modules/font-awesome/fonts/*'
19 | ]
20 | };
--------------------------------------------------------------------------------
/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/panteng/wechat-h5-boilerplate/8e9928bb9a96afe5c5a0845a2e53f5428713274e/demo.jpg
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var autoprefixer = require('gulp-autoprefixer');
4 | var browserify = require('gulp-browserify');
5 | var browserSync = require('browser-sync').create();
6 | var concat = require('gulp-concat');
7 | var del = require('del');
8 | var gulp = require('gulp');
9 | var imagemin = require('gulp-imagemin');
10 | var inject = require('gulp-inject');
11 | var minifycss = require('gulp-minify-css');
12 | var notify = require('gulp-notify');
13 | var rename = require('gulp-rename');
14 | var runSequence = require('run-sequence');
15 | var sass = require('gulp-sass');
16 | var streamSeries = require('stream-series');
17 | var plumber = require('gulp-plumber');
18 | var uglify = require('gulp-uglify');
19 |
20 | var vendors = require('./config/vendors');
21 |
22 |
23 |
24 | /* ============================================================================================================
25 | ============================================ For Development ==================================================
26 | =============================================================================================================*/
27 |
28 |
29 | // copy fonts from node_modules and app/src/fonts to app/dist/fonts
30 | gulp.task('publish-fonts', function () {
31 | var fonts = vendors.fonts.concat([
32 | 'app/src/fonts/*'
33 | ]);
34 |
35 | return gulp.src(fonts)
36 | .pipe(gulp.dest('app/dist/fonts'));
37 | });
38 |
39 | // optimize images under app/src/images and save the results to app/dist/images
40 | gulp.task('publish-images', function () {
41 | var imagesWithoutSVG = ['app/src/images/**/*', '!app/src/images/**/*.svg'];
42 | var SVGs = 'app/src/images/**/*.svg';
43 |
44 | return streamSeries(
45 | gulp.src(imagesWithoutSVG)
46 | .pipe(imagemin({
47 | optimizationLevel: 3,
48 | progressive: true,
49 | interlaced: true
50 | })),
51 | gulp.src(SVGs)
52 | )
53 | .pipe(gulp.dest('app/dist/images'));
54 | });
55 |
56 | // copy audios from app/src/audios to app/dist/audios
57 | gulp.task('publish-audios', function () {
58 | return gulp.src('app/src/audios/*')
59 | .pipe(gulp.dest('app/dist/audios'));
60 | });
61 |
62 | // compile sass, concat stylesheets in the right order,
63 | // and save as app/dist/stylesheets/bundle.css
64 | gulp.task('publish-css', function () {
65 | var cssVendors = vendors.stylesheets;
66 |
67 | return streamSeries(
68 | gulp.src(cssVendors),
69 | gulp.src('app/src/scss/main.scss')
70 | .pipe(plumber({
71 | errorHandler: errorAlert
72 | }))
73 | .pipe(sass({
74 | outputStyle: 'expanded'
75 | }))
76 | .pipe(autoprefixer())
77 | )
78 | .pipe(concat('bundle.css'))
79 | .pipe(gulp.dest('app/dist/stylesheets'))
80 | .pipe(browserSync.stream());
81 | });
82 |
83 | // bundle CommonJS modules under app/src/javascripts, concat javascripts in the right order,
84 | // and save as app/dist/javascripts/bundle.js
85 | gulp.task('publish-js', function () {
86 | var jsVendors = vendors.javascripts;
87 |
88 | return streamSeries(
89 | gulp.src(jsVendors),
90 | gulp.src('app/src/javascripts/main.js')
91 | .pipe(plumber({
92 | errorHandler: errorAlert
93 | }))
94 | .pipe(browserify({
95 | transform: ['partialify'],
96 | debug: true
97 | }))
98 | )
99 | .pipe(concat('bundle.js'))
100 | .pipe(gulp.dest('app/dist/javascripts'));
101 | });
102 |
103 | // inject app/dist/stylesheets/bundle.css and app/dist/javascripts/bundle.js into app/src/index.html
104 | // and save as app/dist/index.html
105 | gulp.task('inject', function () {
106 | var target = gulp.src('app/src/index.html');
107 | var assets = gulp.src([
108 | 'app/dist/stylesheets/bundle.css',
109 | 'app/dist/javascripts/bundle.js'
110 | ], {
111 | read: false
112 | });
113 | return target
114 | .pipe(inject(assets, {
115 | ignorePath: 'app/dist/',
116 | addRootSlash: false,
117 | removeTags: true
118 | }))
119 | .pipe(gulp.dest('app/dist'));
120 | });
121 |
122 | // watch files and run corresponding task(s) once files are added, removed or edited.
123 | gulp.task('watch', function () {
124 | browserSync.init({
125 | server: {
126 | baseDir: 'app/dist'
127 | }
128 | });
129 |
130 | gulp.watch('app/src/index.html', ['inject']);
131 | gulp.watch('app/src/scss/**/*.scss', ['publish-css']);
132 | gulp.watch('app/src/javascripts/**/*', ['publish-js']);
133 | gulp.watch('app/src/fonts/**/*', ['publish-fonts']);
134 | gulp.watch('app/src/images/**/*', ['publish-images']);
135 | gulp.watch('app/src/audios/**/*', ['publish-audios']);
136 |
137 | gulp.watch('app/dist/index.html').on('change', browserSync.reload);
138 | gulp.watch('app/dist/javascripts/*').on('change', browserSync.reload);
139 | gulp.watch('app/dist/fonts/*').on('change', browserSync.reload);
140 | gulp.watch('app/dist/images/*').on('change', browserSync.reload);
141 | });
142 |
143 | // delete files under app/dist
144 | gulp.task('clean-files', function(cb) {
145 | return del([
146 | 'app/dist/**/*'
147 | ], cb);
148 | });
149 |
150 | // delete cache
151 | // gulp.task('clean-cache', function (cb) {
152 | // return cache.clearAll(cb)
153 | // });
154 |
155 | // development workflow task
156 | gulp.task('dev', function (cb) {
157 | runSequence(['clean-files'], ['publish-fonts', 'publish-images', 'publish-audios', 'publish-css', 'publish-js'], 'inject', 'watch', cb);
158 | });
159 |
160 | // default task
161 | gulp.task('default', ['dev']);
162 |
163 |
164 |
165 | /* ============================================================================================================
166 | ================================================= For Production ==============================================
167 | =============================================================================================================*/
168 |
169 | // minify app/dist/stylesheets/bundle.css and save as app/dist/stylesheets/bundle.min.css
170 | gulp.task('minify-css', function () {
171 | return gulp.src('app/dist/stylesheets/bundle.css')
172 | .pipe(minifycss())
173 | .pipe(rename({
174 | suffix: '.min'
175 | }))
176 | .pipe(gulp.dest('app/dist/stylesheets'));
177 | });
178 |
179 | // uglify app/dist/javascripts/bundle.js and save as app/dist/javascripts/bundle.min.js
180 | gulp.task('uglify-js', function () {
181 | return gulp.src('app/dist/javascripts/bundle.js')
182 | .pipe(uglify())
183 | .pipe(rename({
184 | suffix: '.min'
185 | }))
186 | .pipe(gulp.dest('app/dist/javascripts'));
187 | });
188 |
189 | // inject app/dist/stylesheets/bundle.min.css and app/dist/javascripts/bundle.min.js into app/src/index.html
190 | // and save as app/dist/index.html
191 | gulp.task('inject-min', function () {
192 | var target = gulp.src('app/src/index.html');
193 | var assets = gulp.src([
194 | 'app/dist/stylesheets/bundle.min.css',
195 | 'app/dist/javascripts/bundle.min.js'
196 | ], {
197 | read: false
198 | });
199 | return target
200 | .pipe(inject(assets, {
201 | ignorePath: 'app/dist/',
202 | addRootSlash: false,
203 | removeTags: true
204 | }))
205 | .pipe(gulp.dest('app/dist'));
206 | });
207 |
208 | // delete app/dist/stylesheets/bundle.css and app/dist/javascripts/bundle.js
209 | gulp.task('del-bundle', function (cb) {
210 | return del([
211 | 'app/dist/stylesheets/bundle.css',
212 | 'app/dist/javascripts/bundle.js'
213 | ], cb);
214 | });
215 |
216 | // run 'minify-css' and 'uglify-js' at the same time
217 | // inject the minified files to index.html
218 | // delete unminified files
219 | gulp.task('prod', function (cb) {
220 | runSequence(['minify-css', 'uglify-js'], ['inject-min', 'del-bundle'], cb);
221 | });
222 |
223 |
224 |
225 | /* ===============================================
226 | ================== Functions ====================
227 | ================================================*/
228 |
229 | // handle errors
230 | function errorAlert(error){
231 | notify.onError({
232 | title: "Error in plugin '" + error.plugin + "'",
233 | message: 'Check your terminal',
234 | sound: 'Sosumi'
235 | })(error);
236 | console.log(error.toString());
237 | this.emit('end');
238 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wechat-h5-boilerplate",
3 | "version": "0.3.6",
4 | "description": "A fullpage scrolling website boilerplate for mobile devices.",
5 | "repository": {
6 | "type": "git",
7 | "url": "git+https://github.com/panteng/wechat-h5-boilerplate.git"
8 | },
9 | "author": "Chris Pan",
10 | "license": "MIT",
11 | "devDependencies": {
12 | "browser-sync": "^2.10.1",
13 | "del": "^2.2.0",
14 | "gulp": "^3.9.0",
15 | "gulp-autoprefixer": "^3.1.0",
16 | "gulp-browserify": "^0.5.1",
17 | "gulp-concat": "^2.6.0",
18 | "gulp-imagemin": "^3.1.1",
19 | "gulp-inject": "^4.2.0",
20 | "gulp-minify-css": "^1.2.2",
21 | "gulp-notify": "^3.0.0",
22 | "gulp-plumber": "^1.0.1",
23 | "gulp-rename": "^1.2.2",
24 | "gulp-sass": "^3.1.0",
25 | "gulp-uglify": "^2.0.1",
26 | "partialify": "^3.1.5",
27 | "run-sequence": "^1.1.5",
28 | "stream-series": "^0.1.1"
29 | },
30 | "dependencies": {
31 | "animate.css": "^3.4.0",
32 | "jquery": "^3.1.1",
33 | "normalize.css": "^5.0.0",
34 | "swiper": "^3.2.7"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
33 |
37 |
41 |
45 |
46 |