总结

安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org

1.weinre 用法

可以先用这个命令安装 cnpm -g install weinre 如果不行那么试试下面的方法安装

首先安装java环境

http://www.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html http://www.'c's'd'n'123.com/html/mycsdn20140110/bb/bb8bd0da998195d847421f6c57da3d04.html

运行cmd，在weinre所在文件夹的地址栏输入代码：java -jar weinre.jar --httpPort 8081 --boundHost -all- （如下图）：

　　比如文件位置在这C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web\demo\phone

cmd进入该目录下，运行 weinre --httpPort 8082 -boundHost -all-

运行页面输入 http://114.0.0.200:8082/demo/phone/phone.html ip去ipconfig取得

8月28号更新

将调试的页面中写入调试的JS

<script src="http://114.0.0.200:8082/target/target-script-min.js#anonymous"></script>

然后在极路由里设置本机的IP地址  然后手机或者电脑打开页面 (手机和电脑的url都一样。例如：wbbdemo.com/this.html)就会看到了

需要数据的话需要把开发或者测试的host拿来 设置到极路由里面

2.gulp 安装

　　比如之前全局都安装完的情况下教程点这 http://www.cnblogs.com/2050/p/4198792.html

进入文件目录运行 cnpm install --save-dev gulp 然后安装模块例如

cnpm install —-save-dev gulp-imagemin

运行cnpm init 建立package.json文件

cnpm install -g grunt-cli

cnpm install grunt

安装完 配置gulpfile.js文件

/*"use strict";
var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	sass = require('gulp-sass'),
	mincss = requrie('gulp-mini-css'),
	sourcemaps = require('gulp-sourcemaps');

var raw_css = './sass',
	com_css = './build/sass',
	raw_js = './js',
	com_js = './build/js';


//每个gulp.task(name, fn)都是一个任务配置模块，如本代码段定义了名为"sass"的任务的执行流程
gulp.task('sass', function() {
	//gulp.src(glob)返回了一个可读的stream，如此行返回了raw/css/下的全部（包含子文件夹里的）.scss文件流
  	gulp.src( raw_css + '/*.scss')
  	//.pipe()管道化执行组件任务，此处调用gulp-sourcemaps的初始化api来处理接收的文件流（方便后续编译出.map文件）
	  	.pipe(sourcemaps.init())
	  	//执行gulp-sass组件任务，把.scss文件流编译为.css文件流
	  	.pipe(sass())
	  	//调用gulp-sourcemaps的写入api，额外输出.map文件流
	  	.pipe(sourcemaps.write('/'))
	  	//执行gulp-mini-css组件任务，压缩所有css文件流
	  	.pipe(mincss())
	  	//gulp.dest(glob)返回一个可写的stream，如此行是将文件流写入到 COMPRESS/css 里的对应路径下
	  	.pipe(gulp.dest( com_css ));
});

gulp.task('mincss',function(){
	gulp.src( com_css+'/*.js' )
		.pipe( mincss() )
		.pipe(gulp.dest(com_css));
});

gulp.task('minjs',function(){
	gulp.src(raw_js+'/*.js')
		.pipe( uglify() )
		.pipe( gulp.dest(com_js) );
});

gulp.task('watch',function(){
	gulp.watch(raw_css+'/*.scss',['sass']);
	gulp.watch(raw_js+'/*.js',['minjs']);
});

gulp.task('default',function(){
    gulp.run('sass','minjs','mincss');
    gulp.run('watch');
});
*/
"use strict";
//在你的项目根目录下创建gulpfile.js，代码如下：

// 引入 gulp
var gulp = require('gulp');

// 引入组件
var htmlmin = require('gulp-htmlmin'), //html压缩
	imagemin = require('gulp-imagemin'), //图片压缩
	//pngcrush = require('imagemin-pngcrush'),
	minifycss = require('gulp-minify-css'), //css压缩
	jshint = require('gulp-jshint'), //js检测
	uglify = require('gulp-uglify'), //js压缩
	concat = require('gulp-concat'), //文件合并
	rename = require('gulp-rename'), //文件更名
	notify = require('gulp-notify'), //提示信息
	rev = require('gulp-rev'),   //加MD5
	revCollector = require('gulp-rev-collector');


// 压缩htmlb
gulp.task('html', function() {
	return gulp.src('*.html')
		.pipe(htmlmin({
			collapseWhitespace: true
		}))
		.pipe(rev())
		.pipe(gulp.dest('./dest'))
		.pipe(notify({
			message: 'html task ok'
		}));

});

// 压缩图片
gulp.task('img', function() {
	return gulp.src('images/*')
		.pipe(imagemin({
			//optimizationLevel:7, //类型：Number  默认：3  取值范围：0-7（优化等级）
			//progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
			//svgoPlugins: [{
			//	removeViewBox: false
			//}], //不要移除svg的viewbox属性
			//use: [pngcrush()] //使用pngquant深度压缩png图片的imagemin插件
				//interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
				// multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
		}))
		.pipe(gulp.dest('./dest/images/'))
		.pipe(notify({
			message: 'img task ok'
		}));
});

// 合并、压缩、重命名css
gulp.task('css', function() {
	return gulp.src('css/*.css')
		.pipe(concat('main.css'))
		.pipe(gulp.dest('dest/css'))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(minifycss())
		.pipe(gulp.dest('dest/css'))
		.pipe(notify({
			message: 'css task ok'
		}));
});

// 检查js
gulp.task('jslint', function() {
	return gulp.src('js/*.js')
		.pipe(jshint())
		.pipe(jshint.reporter('default'))
		.pipe(notify({
			message: 'jslint task ok'
		}));
});

// 合并、压缩js文件
gulp.task('js', function() {
	return gulp.src('js/*.js')
		.pipe(concat('all.js'))
		.pipe(gulp.dest('dest/js'))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(uglify())
		.pipe(gulp.dest('dest/js'))
		.pipe(notify({
			message: 'js task ok'
		}));
});

// 默认任务
gulp.task('default', function() {
	gulp.run('img', 'css', 'jslint', 'js', 'html');

	// 监听html文件变化
	gulp.watch('*.html', function() {
		gulp.run('html');
	});

	// Watch .css files
	gulp.watch('css/*.css', ['css']);

	// Watch .js files
	gulp.watch('js/*.js', ['jslint', 'js']);

	// Watch image files
	gulp.watch('images/*', ['img']);
});

　　3.bower安装

安装完以后运行 bower install almond

然后运行 bower init 建立bower.json文件

然后运行 bower install jquery

4.scss映射

文件目录下 gem install compass-sourcemaps --pre

下面复制到rb文件里
# enable sourcemaps
enable_sourcemaps = true
sass_options = {:sourcemap => true}

5.Charles的运用

首先电脑wifi连接极路由的wifi 然后把极路由的host配置到测试环境的host 手机也连接极路由的host 手动设置代理 IP 为电脑ipconfig的IP 端口号为8888？（不确定之前是否有设置）手机上输入 http://dev.5173cdn.com/newmobile/build/1.00/html/gameinfo.html 例如这个页面

6.本地用grunt建立多个ajax服务器

命令行进入gruntfile文件所在目录。
运行grunt ajax;

如要开多个服务器。多复制几份，更改端口号；

例如 http://127.0.0.1:8083/?callback=“这里随便写什么”
地址不能用localhost

var path = require('path');
var http = require('http');
var urllib = require('url');

  module.exports = function(grunt) {

    // 重新设置 grunt 的项目路径，获取当前的 package.json 文件信息
    //grunt.file.setBase(__dirname);

    // 获取当前目录相对于共享 node_modules 目录的路径(以windows下面为例)
   //var nodepath = path.relative(__dirname,'../node_modules/');


    //生成模拟jsonp接口
    grunt.registerTask('ajax',"ajax",function(opts){
        var port = 8088;
        var data = grunt.file.readJSON('data.json');

        //变成同步模式
        this.async();
        http.createServer(function(req, res){
            var params = urllib.parse(req.url, true);
            if (params.query && params.query.callback) {
                var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
                res.end(str);
            } else {
                res.end(JSON.stringify(data));//普通的json  
            }
        }).listen(port, function(){
            console.log('可以使用 "http://127.0.0.1:' + port +'/?callback=名称" 来访问接口');
        });
    });

   

};

 module.exports = function(grunt) {

    // 重新设置 grunt 的项目路径，获取当前的 package.json 文件信息
    //grunt.file.setBase(__dirname);

    // 获取当前目录相对于共享 node_modules 目录的路径(以windows下面为例)
   //var nodepath = path.relative(__dirname,'../node_modules/');


    //生成模拟jsonp接口
    grunt.registerTask('ajax1',"ajax1",function(opts){
        var port = 8083;
        var data = grunt.file.readJSON('data.json');

        //变成同步模式
        this.async();
        http.createServer(function(req, res){
            var params = urllib.parse(req.url, true);
            if (params.query && params.query.callback) {
                var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
                res.end(str);
            } else {
                res.end(JSON.stringify(data));//普通的json  
            }
        }).listen(port, function(){
            console.log('可以使用 "http://127.0.0.1:' + port +'/?callback=名称" 来访问接口');
        });
    });

   

};

grunt建立ajax服务器

posted @ 2015-08-11 22:16 小菜鸡12315 阅读(303) 评论(0) 编辑收藏举报

刷新页面返回顶部

小菜鸡

总结

公告