gulpfile.js

// a trick of load .config as JSON ;)
require.extensions['.config'] = require.extensions['.json'];

var gulp = require('gulp');
var rmdir = require('rmdir');

var browserify = require('gulp-browserify');
// var named = require('vinyl-named');
var uglify = require('gulp-uglify');

var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

var less = require('gulp-less');
var sass = require('gulp-sass');
var importCSS = require('gulp-import-css');
var cssmin = require('gulp-cssmin');

var path$ = require('path');
var destRoot = path$.join(__dirname, './prd/');
var cssDest = path$.join(__dirname, './prd/css/');
var jsDest = path$.join(__dirname, './prd/js/');


gulp.task('build-image', function () {
	return gulp.src('./images/**/*.*')
		.pipe(imagemin({
			progressive: true,
			use: [pngquant()]
		}))
		.pipe( gulp.dest('./images/') );
});

// clean tasks
gulp.task('cleanAll', function () {
	rmdir(destRoot);
});
gulp.task('clean', function () {
	rmdir(cssDest);
	rmdir(jsDest);
});


// build tasks
gulp.task('build-css', function () {
	gulp.src( './src/css/**.scss', {base: './src'} )
		.pipe( sass() )
		.pipe(sass().on('error', sass.logError))
		.pipe(gulp.dest( destRoot ));

	gulp.src( './src/css/**.less', {base: './src'} )
		.pipe( less() )
		.pipe(gulp.dest( destRoot ));


	gulp.src('./src/css/**.css', {base: './src'})
		.pipe( importCSS() )
		// .pipe( cssmin() )
		.pipe(gulp.dest( destRoot ));
});
gulp.task('build-js', function () {
	gulp.src('./src/js/**.js', {base: './src'})
		// .pipe(named())
		.pipe(browserify())
		// .pipe(uglify())
		.pipe(gulp.dest( destRoot ));
});

gulp.task('min', function () {
	gulp.src(jsDest)
		.pipe(uglify())
		.pipe(jsDest);

	gulp.src(cssDest)
		.pipe(cssmin())
		.pipe(cssDest);
});


// default task
gulp.task('default', ['clean', 'build-css', 'build-js']);
gulp.task('online', ['clean', 'build-css', 'build-js', 'min']);

// watch task
gulp.task('watch', function () {
	var watcheSASS = gulp.watch('./src/css/**/*.scss', ['build-css']);
	var watcherLESS = gulp.watch('./src/css/**/*.less', ['build-css']);
	var watcherJS = gulp.watch('./src/js/**/*.js', ['build-js']);
	var watcherVue = gulp.watch('./src/js/**/*.vue', ['build-js']);
	watcherJS.on('change', function(event) {
	  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
	});
	watcherVue.on('change', function(event) {
	  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
	});
	watcheSASS.on('change', function(event) {
	  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
	});
	watcherLESS.on('change', function(event) {
	  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
	});
});

newslist.vue

<template>
	<div class="scroller">
		<div class="news-tips-ly" v-if="+updateCount > 0" v-show="updateCountVisibility" transition="fadeOut">为您更新了{{updateCount}}篇新闻</div>
		<div class="refresh-ly" v-show="reflushIconVisibility"><a href="#"></a></div>
		<slot name="outter"></slot>
		<div class="lj-con">
			<slot name="inner"></slot>
			
			<section class="news-blk" v-if="visibility && newsList.length">
				<div class="news-list" :class="{'multi-pic-list' : news.photo_manage && news.photo_manage.length > 1}" v-for="news in newsList">
					<div class="list-inner clearfix">
						<template v-if="news.photo_manage && news.photo_manage.length > 1">
							<!-- 多图 -->
							<h3 class="tit"><a href="{{news.url}}">{{{news.title | redKeyword keyword}}}</a></h3>
							<ul class="pic-list clearfix" v-for="photo in news.photo_manage">
								<li>
									<div class="pic-box">
										<img :src="photo.src || 'http://cdn.leju.com/m.news/images/default.jpg'" alt="{{photo.description || news.title}}" v-on:error="onImageError">
									</div>
								</li>
							</ul>
							<div class="footer">
								<span class="author">{{news.media}}</span>
								<span class="time">{{news.createtime | fromNowOn}}</span>
								<a class="close" v-if="news.tags && news.tags.length" @click="showUnlikePanel($event, news.id)"></a>
							</div>
						</template>
						<template v-else>
							<div class="single-pic-box">
								<!-- 单图 -->
								<template v-if="news.photo_manage && news.photo_manage.length">
									<img :src="news.photo_manage[0].src" alt="{{news.photo_manage[0].description || news.title}}"  v-on:error="onImageError">
								</template>
								<!-- 无图 -->
								<template v-else>
									<img src="http://cdn.leju.com/m.news/images/default.jpg" :alt="news.title">
								</template>
							</div>
							<div class="list-info">
								<h3 class="tit"><a href="{{news.url}}">{{{news.title | redKeyword keyword}}}</a></h3>
								<div class="footer">
									<span class="author">{{news.media}}</span>
									<span class="time">{{news.createtime | fromNowOn}}</span>
									<a class="close" v-if="news.tags && news.tags.length" @click="showUnlikePanel($event, news.id)"></a>
								</div>
							</div>	
						</template>
					</div>
				</div>
	
	
				<guess-like v-if="newsList.length > 1" v-show="guesstagVisibility" v-ref:guess :guesstag-data="guesstagData"></guess-like>
			</section>
			<div v-if="!reflushIconVisibility && newsList && newsList.length === 0" class="onload">暂无相关数据~</div>
	
			<bot-scroll v-if="newsList.length > 0" :disabled="botDisabled" :bot-scroll-msg="botScrollMsg"></bot-scroll>
		</div>
	</div>
</template>

<script>
	var $ = require('../lib/$.js');
	var Vue = require('../lib/vue.js');
	var fromNowOn = require('../lib/autoTimeString.js');
	var VueResource = require('../lib/vue-resource.common.js');
	Vue.use(VueResource);
	Vue.filter('fromNowOn', fromNowOn);
	Vue.filter('redKeyword', function (value, keyword) {
		var p = new RegExp( '(' + keyword + ')', 'g');
		return value.replace( p, '<span style="color:red;">$1</span>' );
	})

	var Slider = require('../components/Slider.vue');
	var GoTop = require('../components/GoTop.vue');
	var BotScroll = require('../components/BotScroll.vue');
	var GuessLike = require('../components/GuessLike.vue');

	var UDC_API = 'udc_api';

	module.exports = Vue.extend({
		components: {
			Slider: Slider,
			GuessLike: GuessLike,
			BotScroll: BotScroll
		},
		props: ['apiurl', 'keyword', 'autoInit'],
		data: function () {
			return {
				visibility: false,
				updateCountVisibility: false,
				reflushIconVisibility: true,
				botDisabled: false,
				newsList: [],
				updateCount: '',
				API: this.apiurl,
				params: {
					createtime: '',
					p: 1,
					pcout: 10,
					topcolumn: ''
				},
				guesstagVisibility: false,
				botScrollMsg: '向上滑动加载更多'
			};
		},
		ready: function () {
			if (this.autoInit !== false) {
				this.getNews();
			}
		},

		methods: {
			getNews: function () {
				var self = this;
				var params = self.params;
				var newsList$ = $('.news-list');
				self.botScrollMsg = '正在加载...';
				self.reflushIconVisibility = true;

				if (params.topcolumn === '最新') {
					params.topcolumn = '';
				}

				if (this.keyword) {
					params.keyword = this.keyword;
				}

				params.p += 1;
				this.$http({
					url: this.API,
					method: 'jsonp',
					data: this.params
				}).then(function (res) {
					var data = res && res.data;
					var newsList;
					this.$dispatch('get-news-list', data);
					// 更新条数，一天只提示一次
					if (this.params.p === 1) {
						var pathname = location.pathname;
						var ts = getTimeString();
						if (pathname === '/') {
							pathname = '/index.html';
						}
						var updateMsg = JSON.parse(localStorage.getItem('updateMsg') || '{}');
						if ( updateMsg[pathname] !== ts ) {
							updateMsg[pathname] = ts;
							localStorage.setItem('updateMsg', JSON.stringify(updateMsg));
							
							this.updateCountVisibility = !! +data.update_cout;
							this.updateCount = data.update_cout;
							setTimeout(function () {
								self.updateCountVisibility = false;
							}, 1000);
						}
					}
					// 最新的轮播数据
					// if (!this.sliderData) {
					// 	this.sliderData = data.recommend_data;
					// }
					// 标签
					// if (data.tag) {
					// 	this.tagData = data.tag;
					// }
					
					this.visibility = true;
					if (data.rkey) {
						params.rkey = data.rkey;
					}
					if ( data && data.data && data.data.length ) {
						newsList = data.data;
						if (newsList.length) {
							this.newsList = this.newsList.concat(newsList);
							this.params.createtime = newsList[newsList.length-1].createtime;
						}
						self.botScrollMsg = '向上滑动更多';
						this.botDisabled = false;
					} else {
						this.botScrollMsg = '没有更多数据了';
						this.botDisabled = true;
					}
					this.reflushIconVisibility = false;

					if ( !params.topcolumn && params.p === 4) {
						this.guesstagVisibility = true;
					}

					if ( params.p === 1 && params.topcolumn === '标签') {
						this.recordClickTag(params.tag_id);
					}
				});
			},

			showUnlikePanel: function (event, id) {
				var thatNews = this.newsList.filter(function(news){
					return news.id === id;
				})[0];
				if (thatNews && thatNews.tags) {
					this.$dispatch('pubEvent', 'showUnlikePanel', event, thatNews);
				} else {
					console.log('没有标签数据');
				}
			},

			recordClickTag: function (tag) {
				if (!tag) {
					return;
				}
				this.$http({
					url: UDC_API,
					data: {
						data: JSON.stringify({
							"class":"koudai",
							"action":"intonews",
							"params": {
								"mid": getMID(),
								"uid": getUID(),
								"newsid": refer_newsid || '',
								"typeid":"0",
								"operate": "click",
								"refer_newsid": "",
								"tag": tag
							}
						})
					}
				})
				.then(function (res) {
					// console.log(res);
				});
			},

			onImageError: function (e) {
				e.target.src = 'http://cdn.leju.com/m.news/images/default.jpg';
			}
		},

		events: {
			botScrollEnd: function () {
				var self = this;
				// hotLog.log(this.params.p);

				if ( !this.params.topcolumn ) {
					if (this.params.p === 2) {
						this.$refs.guess.getGuessTags();
					}
				}
				this.getNews();
			}

			// PM 说不删除 =_=!!
			// removeNews: function (news) {
				// var newsList = this.newsList;
				// newsList.splice(newsList.indexOf(news), 1);
			// }
		}
	});
</script>