Gulp前端自动化工具

前端日常工作是什么?拿到PSD图,然后开切!首先我们建立一个app的文件夹,然后在app下,我们建立img文件夹,接下来是 css …… 项目终于搞定之后,我们要使用在线压缩工具把样式表进行合并压缩,把所有的大尺寸图片重新导入Ps,保存为 web 格式,然后调整质量 。。。。。。

你就没想过偷懒的办法么?你就是这么把时间耗在没有意义的简单机械的活儿中么?

或者,很多前端都已经开始使用Grunt这样的工具了,自动压缩、自动打包、文件合并、Less,Sass 编译、文件监控、本地文件服务器调试环境。不错,基于Grunt另外推出了非常多的 generate ,类似 angularJS , Ember , Backbone, webapp, bootstrap 等等等等,但是 Grunt 的学习曲线也是非常陡的。虽然能够通过一些通用脚手架来搭建前端工程作为基础架构。一旦需要修改配置,则是异常痛苦。

gulp 的功效和 Grunt 也是异曲同工、插件也是异常丰富。

通过 Grunt 与 gulp 的对比。我个人还是比较喜欢 gulp 的一些操作模式。不管是从词法、编程语义的理解程度来说。gulp 都是优于 Grunt 。官网的介绍谈到了文件流、以及处理速度。因为没有现成的案例,所以不能妄自评论。下面就浅谈一下两者之间的使用细节。

这里引用?http://markgoodyear.com/2014/01/getting-started-with-gulp/ 中的例子:

Grunt

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

Gulp

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

不管从代码还是从阅读性上来说,Gulp 不是更加优越一些嘛?从代码的输入和输出,以及事件的操作顺序一幕了然,完全不用在复杂的GruntFile中间去找各种各样的变量表达式。妈妈再也不用担心我的学习!

那么我们来一个简单的Case吧。

首先确保你安装了NodeJS。

然后运行

npm install gulp -g

安装 gulp 到你的系统环境中,创建好您的文件目录,在根目录中建立文件:package.json

package.json


{
  "name": "project-demo",
  "autho": "可乐加糖",
  "email": "33370733@qq.com",
  "devDependencies": {
    "del": "^1.1.1",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-concat": "^2.4.3",
    "gulp-imagemin": "^2.1.0",
    "gulp-jshint": "^1.9.0",
    "gulp-livereload": "^3.3.0",
    "gulp-minify-css": "^0.3.12",
    "gulp-notify": "^2.1.0",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^1.3.1",
    "gulp-uglify": "^1.0.2"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

声明好你需要使用的插件包之后,npm install 开始安装所有的插件包。之后在文件夹根目录建立 gulpfile.js文件。

这里我写了一个基础代码(未完成版,已编译Scss,Js,Css 文件合并压缩,语法检查)提供给大家能够有一个直观的影响。稍后我会做成一个通用的部署脚本,添加所有的注释方便大家学习。并且把整个文件发布到Github之中作为前端工程模版。


var gulp = require('gulp'),
	jshint = require('gulp-jshint'),
	concat = require('gulp-concat'),
	rename = require('gulp-rename'),
	uglify = require('gulp-uglify'),
	imagemin = require('gulp-imagemin'),
	autoprefixer = require('gulp-autoprefixer'),
	sass = require('gulp-sass'),
	minifyCSS = require('gulp-minify-css'),

	del = require('del');

//设置目录
var paths = {
	scripts: 'app/js/',
	images: 'app/imgs/',
	css: 'app/css/',
	scss: 'app/scss/',
	build: 'build/'
};
//清理操作
gulp.task('clean', function(cb) {
	del([paths.build], cb)
});
//JS语法检查
gulp.task('jshint', function() {
	gulp.src(paths.scripts + "*.js")
		.pipe(jshint())
		.pipe(jshint.reporter('default'));
});
//编译SCSS
gulp.task('sass', function() {
	gulp.src(paths.scss + "*.scss")
		.pipe(sass())
		//自动添加CSS3前缀
		.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
		.pipe(gulp.dest(paths.css));
});
//合并CSS
gulp.task('minify-css',['sass'], function() {
	gulp.src(paths.css + '*.css')
		.pipe(concat('all.css'))
		.pipe(minifyCSS({
			keepBreaks: true
		}))
		.pipe(gulp.dest(paths.build + "css"))
});
//合并与脚本压缩
gulp.task('minify', function() {
	gulp.src(paths.scripts + "*.js")
		.pipe(jshint())
		.pipe(concat('all.js'))
		.pipe(gulp.dest(paths.scripts))
		.pipe(rename('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest(paths.build + "js"))
});
//文件监控
gulp.task('name',['tasks'], function() {
    
});



gulp.task('default', ['clean'], function() {
	console.log("请进行任务配置");
});

gulp.task('build',['clean'], function() {
    gulp.run('jshint','minify-css','minify')
});

参考资料:

  • http://www.html-js.com/article/Task-runs-Gulp-for-task-Gulp-based-tutorial
  • https://www.npmjs.com/search?q=gulp&page=1
  • http://segmentfault.com/blog/laopopo/1190000000372547?page=1

前端重构Sass的相关使用(笔记二)

Sass 使用中有一个 Amazing 的功能,配合着 compass 能够做出非常多高效的工作,首当其冲的就是自动化雪碧图工具。

雪碧图自然不用多说,做过前端的开发都知道雪碧图。好处呢在于能够大大节约网络的开销,把Http请求降低。自然在原来的前端开发中,制作的成本也是偏高。环境安装请看这里?http://www.html-js.com/article/CSS-solves-the-installation-and-debugging-of-SASSCompass-scheme

环境Ok之后,通过命令确认安装完毕。

1

创建工程请执行 compass create app

2

Compass自动为我们生成了相关的文件目录。好吧,开搞!进入项目目录,运行 compass watch 来实施监控文件发生的变化。实施编译Sass。 之后写入这样的代码段。

1
@import "compass/reset";
//通过在SASS文件中使用import来自动生成雪碧图
/*
 首先声明布局模式4种
 vertical   垂直
 horizontal 水平
 diagonal   对角线
 smart      智能排列
 */
 $toolbar-layout: 'smart';
//包含的文件夹路径
@import "../images/icons/*.png";
//混合宏sprites,COMPASS内置方法,能够通过文件名
//来生成相应的CSS代码片段
@include all-icons-sprites;

@mixin icon-base($icon_name){
	display: inline-block;
	margin: 10px;
	text-indent: -9999px;
	@include icons-sprite($icon_name);
}

//图标iphone
.iphone_icon{
	width: 256px;
	height: 256px;
	@include icon-base(iphone);
}
//图标B
.login_icon{
	width: 100px;
	height: 25px;
	display: block;
	@include icon-base(login);
}

然后他会根据规则生成响应的Css文件。
2

通过观察,我们不难发现,原来image文件中的文件名,就是class样式中的名字,规则是根据 “文件夹-文件”这样的规则生成。

这样应用起来是不是很快呢?

这种写法一个需要注意的地方就是在于文件夹和文件的放置位置。SASS生成的代码完全是根据文件夹和文件的位置决定的。更好的规划图片当然能够获得更加易读的代码。比如:


Image根目录
  |___ icon
  		|____ icona.png
		|____ iconb.png
  |___ banner
  		|_____ a.png
		|_____ b.png

对应的Sass语法则是


@include all-icons-sprites;
@include all-banner-sprites;
//在这里我们使用B
div{
	@include banner-sprite(a);
}

源代码和注释已上传,有需要的朋友可以下载研究。

sass-demo 点击下载

前端重构Sass的相关使用(笔记一)

随着Sass与Less的使用越来越多,相比越来越多的前端攻城师都体会到它们的优越性。前端由于一部分工作都是在Html,Css中的编码进行的。好的工具在开发的过程中对效率值的贡献尤为重要。使用Sass有一段时间。在这里也做一个分享。让更多需要的人快乐的编码。

Sass,Less,Scss 都是一些什么东西?

简单的理解来说,它们都属于对原有CSS的扩展。能够更加方便的书写样式规则,强化了Css原有的功能。Sass,Scss 都是来自同一个妈。

Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(SassyCSS)),它是css3语法的的拓展级,就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为拓展名。

基本语法参考:

c76fd27f54f465484be3c45d06e4cd6d
而Less比较特殊,功能大体上差不多。在前端导入less.js也能在客户端解析link中的.less文件。基于Dom解析与渲染速度,个人不太赞同这种做法。Less也有服务器端版本。因为篇幅原因,在这里就不做介绍了。有兴趣的同学可以去参考这里。 http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

Sass 新语法中添加了很多很有意思的东西,变量、混合、嵌套、样式继承等。辐射到周边的Compass应用能够对生成的样式表文件进行压缩、合并,减小服务器带宽、加速界面响应速度。通过几个简单的例子,介绍一下这些非常实用的功能。

  • 嵌套
    /* 生成代码 */
    nav ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li{
      display: inline-block;
    }
    /* SCSS语法 */
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li { display: inline-block; }
    }
  • 变量定义
    $blue : #1875e7; 
    div {
      color : $blue;
    }
  • 混合
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
          border-radius: $radius;
    }
    .box { @include border-radius(10px); }
    
  • 样式继承
    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      @extend .message;
      border-color: green;
    }
    
    .error {
      @extend .message;
      border-color: red;
    }

进阶功能介绍,Css常用开发功能 雪碧图与文件合并压缩。请参考笔记二(待更新)

Apache中的一个测试小工具

一个不错的 目录中的 ab.exe ,相当简单容易的一个测试小工具。 ab -n 1000 -c 50 http://www.xxx.com/(要测试的网站目录)相当的简单容易。让你初步对服务器的性能有一个简单的了解。
1123

程序员日记五-感谢所有关心我的朋友

现在是北京时间:2014年9月17日2:08:26 。一个人在床上翻来覆去的睡不着,完全不知道在想一些什么样的事情,索性干脆起床继续看看资料和新闻。翻到关于JavaScript中模块化管理的章节,顺势就阅读了AMD的相关规范内容,异常感叹IT技术的更新变革的效率。前端开发的工作已经从最初的Function时代大大跃进到了一个新的领域。异步处理这样的工作方式也将会在服务器端有所作为。

离开拓维的半年时光,过得蛮瞎的。时间和现实在一点点侵蚀着当初的理想和创业的决心。首先感谢最近一直关心我的同事和朋友。感谢你们热心的给我介绍各种各样的工作。感谢在我需要帮助的时候给我这么多的工作机会。感谢能够听我倾诉内心的不愉快以及给我各种各样的建议。在各种聊天的字里行间,其实我内心还是坚定自己出来的信念。在各种技术研讨交流会上,也慢慢的清晰了自己的定位。对自己的职业规划也有一个基本的定型。期间,结识了很多朋友,也收获了很多宝贵的创业经验。我相信现在的不愉快和低落的情绪都会随着时间的推移慢慢磨平。斗志和激情一直都是不会被磨灭,这段时间给我的教训无非也就是那么几句老话,打铁还需自身硬。独立、效率的工作才是靠谱的东西。都说罗马不是一天建成,无非只是看是几个人建还是一个人建,只有踏实的做,“罗马”才会欣欣向荣。

复习Javascript的一些代码(未完待续)

偶尔翻出来以前写的一些小东西。做应用开发久了,久而久之一开始就很注意框架的选择。但是最初写Javascript那种alert逐步调试。写一些通用的工具类的时间仿佛离我很远了。翻了下以前的一些代码,把他贴出来。就权当是复习下吧。

/**
 * author:      可乐加糖
 * description: 呵呵,不知道写什么好,随便吧。
 */

(function (window) {
    //基础类库
    var cola = {
        get_node: function (elem_id) {
            if (elem_id.constructor != String) {
                throw new Error("参数传递错误");
                return false;
            }
            return document.getElementById(elem_id) || null;
        },
        prev: function (elem) {
            do {
                elem = elem.previousElementSibling
            } while (elem && elem.nodeType != 1);
            return elem
        },
        next: function (elem) {
            do {
                elem = elem.nextSibling;
            } while (elem && elem.nodeType != 1);
            return elem
        },
        first_node: function (elem) {
            elem = elem.firstChild;
            return elem && elem.nodeType != 1 ? this.next(elem) : elem;
        },
        last: function (elem) {
            elem = elem.lastChild;
            return elem && elem.nodeType != 1 ? prev(elem) : elem;
        },
        parent: function (elem, num) {
            num = num || 1;
            for (var i = 0; i < num; i++) {
                if (elem != null)
                    elem = elem.parentNode;
                return elem;
            }
        },
        remove: function (elem) {
          if(elem)
            elem.parentNode.removeChild(elem);
        },
        empty: function (elem) {
            while(elem.firstChild)
                elem.removeChild(elem.firstChild)
        }
    }
    window.cola = cola;
})(window)

这是最开始写的一个二级下拉导航条的代码

document.getElementsByClassName = function(clsName){
    if(typeof(clsName)!="string" || clsName.constructor != String){
        throw new Error("className必须是字符串");
        return false;
    }
    var nodes = document.getElementsByTagName("*");
    var nodeArr = new Array();
    for(var i= 0,icount = nodes.length;i<icount;i++){
        if(nodes[i].className == clsName)
            nodeArr.push(nodes[i]);
    }
    return nodeArr;
}
window.onload = function(){
    var nodes = document.getElementsByClassName("has-child");
    for(var i= 0,icount = nodes.length;i<icount;i++){
        nodes[i].onmouseover = function(){
            var child_menu = this.getElementsByTagName("ul");
            child_menu[0].style.display = "block";
        }
        nodes[i].onmouseout = function () {
            var child_menu = this.getElementsByTagName("ul");
            child_menu[0].style.display = "none";
        }
    }
}

还有获取元素的样式表,当初也是在IE下调试了很久才搞定。

function getStyle(elem,name){
    if(elem.style[name])
        return elem.style[name];
    else if(elem.currentStyle)
        return elem.currentStyle[name];
    else if(document.defaultView && document.defaultView.getComputedStyle){
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    }
    else
        return null;
}

写给而立之年的自己

  • 多做,少说。
  • 冲动是魔鬼,但魔鬼起码比唯唯诺诺的小鬼好。
  • 技术是安家之本,并不代表是职业的全部。
  • 效率有时候比什么都重要。
  • 二师兄队友真的很坑。
  • E 文呢?学还是不学,有个不错的老师还在等。
  • 做好 “ 蜻蜓助手” 搞定一家单位,年底没做到!见人发钱!
  • 天时地利人和是条件,但是不代表可以一直等。机会来了,自己没有干货是行不通的。

好了,就这么多吧。

CentOS6 部署 Rails 工程的一些破事儿

花了整整一天半来搞定环境部署。如果要部署RoR环境我强烈建议新手使用Ubuntu来部署。确实能够省掉很多问题。

详情可以参考这个链接:

http://www.yangzhiping.com/tech/ubuntu-ree-nginx-passenger-rails3.blog.html

在部署的过程中一直都很顺利,但是有几个点需要特别说明。

  1. 如果环境是使用 RVM 搭建的,那么请不要使用 ROOT 登录搭建,原因在于使用 ROOT 安装时RUBY 的环境会存在于 ROOT 根目录中而使用 passenger 的时候会由于权限不足,无法访问 ROOT 目录中的环境导致环境部署失败。
  2. 如果 gem 中存在 github 的地址,例如:
    gem 'mini_magick', :git => 'git://github.com/minimagick/minimagick.git'
    在安装 gem 的时候需要 Try running bundle install --deployment
  3. mysql2 的使用在 windows7 中是存在问题的。但是mysql2的性能要大大由于第一版的驱动程序。安装步骤如下:
    • 下载驱动程序:http://cdn.mysql.com/Downloads/Connector-C/mysql-connector-c-noinstall-6.0.2-win32.zip
    • 拷贝相关文件到RUBY目录,例子:“lib\libmysql.dll C:\RailsInstaller\Ruby1.9.3\bin”
    • 运行安装命令:gem install mysql2 — ‘–with-mysql-lib=”D:/mysql-connector-c-noinstall-6.0.2-win32/lib” –with-mysql-include=”D:/mysql-connector-c-noinstall-6.0.2-win32/include”

通过群里的朋友介绍,Rails 中的 gem 在 Amazon 服务的相关 gem 包也会存在一些问题。具体没详细请教,不过既然选择了 Rails 作为开发框架,建议切换到 Linux 环境应该会比较舒服。

CentOS 配置 ROR 环境

2014.3.20 日更新,我建议大家不要使用我文章中写的内容。因为各个版本的服务器有可能安装上有一些区别。自己本人安装了几个环境。各种坑爹,为此我还特意请教了刘辉哥。大哥很慷慨的发送了一个详细教程。本人也共享给大家。强烈建议参考连接中的安装步骤,省掉不必要的麻烦。

如何快速正确的安装 Ruby, Rails 运行环境在 Ubuntu 12.04 Server 上安装部署 Ruby on Rails 应用

经过一个上午的折腾,终于把ROR环境在CentOS中搞定,绕了很多弯路,把文章写下来总结一下。

安装步骤:

  1. 更新Python
    centos 中默认安装的python是2.4的版本,因为新版的rails需要提供nodejs的相关支持,需要更新python,更新文章可以直接移步到这个链接 http://www.tomtalk.net/wiki/Python
  2. 安装相关的依赖包
    #yum install gcc gcc-c++ openssl* readline* ncurses* zlib* libxml* libjpeg* libpng* libxslt* libtool*
  3. 安装 NodeJS
    wget http://nodejs.org/dist/v0.8.5/node-v0.8.5.tar.gz
    tar zvxf node-v0.8.5.tar.gz
    cd node-v0.8.5
    ./configure
    make && make install
  4. 建议先安装 YAML 否则可能会引起 gem 安装的一个异常,具体可见:http://collectiveidea.com/blog/archives/2011/10/31/install-ruby-193-with-libyaml-on-centos/

     wget http://pyyaml.org/download/libyaml/yaml-0.1.4.tar.gz
     tar xzvf yaml-0.1.4.tar.gz
     cd yaml-0.1.4
     ./configure --prefix=/usr/local
     make
     make install
  5. 安装 Ruby 1.9.3
    wget http://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.3-p0.tar.gz
    tar xzvf ruby-1.9.3-p0.tar.gz
    cd ruby-1.9.3-p0
    ./configure --prefix=/usr/local --enable-shared --disable-install-doc --with-opt-dir=/usr/local/lib
    make
    make install
  6. 升级 gem 并安装 Rails
    如果gem安装失败,可以通过下载源代码的方式进行安装。

    wget http://rubyforge.org/frs/download.php/74445/rubygems-1.6.2.tgz
    tar zxvf rubygems-1.6.2.tgz
    cd rubygems-1.6.2
    ruby setup.rb

    gem 安装成功则直接执行下一步

    gem update --system
    gem install rdoc
    gem install rails
    rails -v

博客开始更新……

2013年的最后两个月,一直忙于外包项目,“可乐加糖”的博客一直处于停更状态。非常遗憾,在这个项目中的预想和现实的差距实在是太大。通过这一次失败的初创经历,也值得让自己反省在这一系列的计划中,到底做错了一些什么东西,定价、市场、客户需求、以及产品最终带来的收益和效果。种种迹象都能给一个产品的定位有一个清晰的指标。这也是大部分的初创容易犯下的错误。

常常都说一个产品的价值体现在能够给用户带来多少利润,其实这也就是一个产品为什么能够得以生存的初衷,“时刻知道客户最需要什么”这句看似简单的话实际上蕴含的商业价值却是通过一个个成型的产品体现出来的。而这个外包的项目我想就是单纯的犯了这个简单的错误而导致接下来的项目岌岌可危。

作为一个开发人员,一个有想法创业的程序猿,我想分享几点各位:

  1. 做任何一款产品也好,考虑它的卖点。

    第一款产品,也就是一个简单的企业网站,我印象中2008年就有成堆的企业建站软件了,就这个老掉牙的项目而言,真真的客户定制化需求是非常多的。单单一个网站能够给普通的企业客户带来多大的利润?如果能够和淘宝或者任意电商结合。这种简单的2000块一个的建站系统我想应该完全应该被淘汰了。通过网络创造价值,而不是简单的一个网络名片。通过更好的电商服务给企业创造价值,应该更好的能够被更多的企业客户接受。

  2. 求精不求全

    坦白来说,一直在大公司工作,这样的东西见得多了,所谓“企业巨头“动不动就是要打造平台。但是就公司失败的产品来看,一开始瞄准平台的产品失败率远远大于功能单一的产品。功能单一其实也就是简单的意味着能够更好、更快的被用户接受。通过迅速的积累用户慢慢产生成熟的平台。

  3. 注意收集用户的数据

    不管是豌豆荚、淘宝、亚马逊、新浪微博、QQ空间 都是在无时不刻的手机用户的数据。现在火爆的微信开发也是一样,在这个方面,我想阿里系的产品应该也是收集用户的鼻祖。试想,如果有软件能够收集到何时何地、什么时间段、什么地域的消费数据、人群数据、购买商品种类数据、消费类型数据能够及时提供给需要的企业客户,数据的价值也就不用多说了。

  4. 技术不是重点,快速迭代才能跟上节奏。

    前期考虑太多的技术、事实证明是完全没必要。快速迭代占领市场。这个也不用多话痨了。事实证明就是如此。

标签云

文章归档

功能