工具

webpack

吴阳 No Comments

1、

webpack will analyze your entry file for dependencies to other files. These files (called modules) are included in yourbundle.js too. webpack will give each module a unique id and save all modules accessible by id in the bundle.js file. Only the entry module is executed on startup. A small runtime provides the require function and executes the dependencies when required

工作记录–Grunt前端自动化2015.10.28

吴阳 No Comments

目录结构

前端文件夹结构如图所示。

多个项目在一起,通过grunt可以检查合并压缩文件。达到快速整合的目的。

单个项目通过watch功能实时调试。能达到事半功倍的效果。

使用less进行前端工作,这里主要针对bootstrap,运用grunt达到一个编译实时预览的效果。

这里还需要livereload功能,公司网速太差,还未

'ues strict';
module.exports = function(grunt) {
 require('load-grunt-tasks')(grunt);
 require('time-grunt')(grunt);
 //任务配置
 grunt.initConfig({
 //config:config;
 pkg: grunt.file.readJSON('package.json'),
 concat:{
 options: {
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 },
 distJs:{//合并JS
 src: [
 'app/admin/js/*.js',
 'app/bootstrap/js/*.js',
 'app/reg/js/*.js',
 'app/shop/js/*.js'
 ],
 dest: 'app/js/<%= pkg.name %>.js'
 },
 distCss:{//合并CSS
 src: [
 'app/admin/css/*.css',
 'app/bootstrap/css/*.css',
 'app/reg/css/*.css',
 'app/shop/css/*.css'
 ],
 dest: 'app/css/<%= pkg.name %>.css'
 }
 },
 jshint: {//JS检查
 beforeconcat: [
 'app/admin/js/*.js',
 'app/bootstrap/js/*.js',
 'app/reg/js/*.js',
 'app/shop/js/*.js'
 ],
 afterconcat: ['app/js/<%= pkg.name %>.js']
 },
 htmlhint: {//html检查
 allhtml: {
 src: ['app/**/*.html','app/*.html']
 }
 },
 uglify: {//压缩JS
 options: {
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 },
 build: {
 src: 'app/js/<%= pkg.name %>.js',
 dest: 'app/js/<%= pkg.name %>.min.js'
 }
 },
 less: {
 development: {
 files: {
 "app/css/bootstrap.css": "less/bootstrap.less"
 }
 }
 },
 csslint:{//检查css
 strict: {
 options: {
 import: 2
 },
 src: [
 'app/admin/css/*.css',
 'app/bootstrap/css/*.css',
 'app/reg/css/*.css',
 'app/shop/css/*.css'
 ]
 },
 strictmin:{
 options: {
 import: 2
 },
 src: ['app/css/<%= pkg.name %>.min.css']
 }
 },
 cssmin: {//压缩CSS
 options: {
 shorthandCompacting: false,
 roundingPrecision: -1
 },
 build: {
 files: {
 'app/css/<%= pkg.name %>.min.css': [
 'app/admin/css/*.css',
 'app/bootstrap/css/*.css',
 'app/reg/css/*.css',
 'app/shop/css/*.css'
 ],
 'app/css/bootstrap.min.css': ['app/css/bootstrap.css']
 }
 }
 },
 watch: {//监视文件变化
 less: {
 files: ['less/*.less'],
 tasks: ['less'],
 },
 livereload: {
 options: { livereload: true },
 files: ['app/**/css/*.css','app/**/js/*.js','app/css/*.css','app/js/*.js','app/*.html'],
 //tasks:['csslint','jshint:beforeconcat','concat','uglify','cssmin']
 }, 
 }
 });
 //注册任务
 grunt.registerTask('default',['watch']);
 grunt.registerTask('check',['jshint:beforeconcat','htmlhint','csslint:strict']);
 grunt.registerTask('finish',['concat','jshint:afterconcat','less','cssmin','uglify']);
};
 //配置完成后,使用cmd进入项目文件夹内,输入grunt即可

 

 

关于XAMPP那些

吴阳 No Comments

1、局域网访问

QQ截图20150723094035

该死的360doc,复制都不行。直接截图完事。

经实践证明,Listen 192.168.0.188:80(本机IP的80端口)即可,如果再加一串本机IP,启动不了Apache。

2、XAMPP虚拟主机配置,多域名绑定

原文地址:http://blog.chinaunix.net/uid-12115233-id-3228719.html

3、打开localhost是页面而非目录的做法

好吧,其实很简单。

xampp\htdocs目录下,添加index.html页面。

巧用chrome调色盘,取色器

吴阳 No Comments

QQ截图20150719173408

F12,打开CSS代码,点选颜色代码,会出现调色板。并且是rgba格式,相当好的福利,还可以调节透明度。

鼠标移除调色盘,还有取色功能,取色区域仅限html中。

真心强大的功能。

FIS初体验

吴阳 2 comments

百度FIS,感觉很牛逼的前端开发框架。http://fis.baidu.com/

FIS

1、以node.js开发,在安装FIS前需要安装node.js,官网下载安装即可(默认安装就好了,免得出什么问题)。

2、装好之后,用CMD命令行工具进行安装。http://fis.baidu.com/docs/beginning/getting-started.html

npm install -g fis

3、命令集合

(1)fis server start  启动FIS的本地调试服务器功能对构建发布的项目进行预览调试,http://127.0.0.1:8080/(下图已经是发布了项目的截图);

fis

(2)fis release,命令会将编译后的项目发布至本地调试服务器,再次刷新浏览器页面,我们就可以到fis-quickstart-demo项目的主页了;
(3)fis release --optimize 或者 fis release -o ,资源压缩(无非就是去掉CSS和JS的空格);
(4)fis server open 打开本地服务器文件夹;
(5)fis release -d <path/to/output> 你想输出到的文件夹路径,你可以随意指定,比如 ./output../outputD:\output。

4、FIS并不能配置wordpress。。。。。或许是我打开的方式不对。。。。。

subline text3-慕课网

吴阳 No Comments

来源: 学以致用——综合技巧运用-慕课网

插件安装

import  urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

subline texe3快捷键

1、新建:ctrl+N

2、匹配跳转:ctrl+P(go to anything),输入“#”,出现页面各种元素,输入对应元素名即可跳转到相应元素位置。

3、控制面板(暂时这么称呼吧):ctrl+shift+P,(1)新建文件之后输入“ssh”,将本文件格式定为CSS3的HTML;(2)输入script,即为js文件;(3)CSS同理。

4、增加一行:ctrl+Enter

5、ctrl加{ 和 ctrl加}:减少缩进 和 增加缩进。

6、在相同结构标签内加入文字。alt+f3选中第一个“需要添加文字的地方的标签”,如:<li></li>,选中><再按快捷键,游标将会出现在标签内,再通过方向键移动到标签内输入字即可。

7、ctrl+shift+v,会将复制过来的代码保持缩进。

Emmet插件快捷键:

1、! 加 ctrl+E,生成HTML5 结构。

2、增加ul结构:ul>.item$*10加ctrl+E

(1)释义:”>”表示当前ul的子元素li;”.item”表示li的class名;”$”序号;”*10″生成1~10排序的li。

(2)生成如下结构:

<ul>
 <li class="item1"></li>
 <li class="item2"></li>
 <li class="item3"></li>
 <li class="item4"></li>
 <li class="item5"></li>
 <li class="item6"></li>
 <li class="item7"></li>
 <li class="item8"></li>
 <li class="item9"></li>
 <li class="item10"></li>
 </ul>

3、h2{this is title}加ctrl+E

结果:

<ul>
 <li class="item1"><h2>this is title</h2></li>
 <li class="item2"><h2>this is title</h2></li>
 <li class="item3"><h2>this is title</h2></li>
 <li class="item4"><h2>this is title</h2></li>
 <li class="item5"><h2>this is title</h2></li>
 <li class="item6"><h2>this is title</h2></li>
 <li class="item7"><h2>this is title</h2></li>
 <li class="item8"><h2>this is title</h2></li>
 <li class="item9"><h2>this is title</h2></li>
 <li class="item10"><h2>this is title</h2></li>
 </ul>