webpack分离css单独打包

这个操作很简单的,只需要一个插件就好了,就是extract-text-webpack-plugin1,安装extract-text-webpack-plugincnpminstallextract-text-webpack-plugin--save-dev2,配置文件添加对应配置首先require一下varExtractTextPlugin=require("extract-text-webpack-plugin");plugins里面添加newExtractTextPlugin("styles.css"),我这里如下:plugins:[newwebpack.optimize.CommonsChunkPlugin('common.js'),newExtractTextPlugin("styles.css"),],modules里面对css的处理修改为{test:/\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")},千万不要重复了,不然会不起作用的我这里如...

gulp解决less一条龙服务

所谓gulp对less的一条龙服务是指,由less编译为css,再由css编译为min.css,再由min.css编译为min.css.map大白话就是Less文件转为css文件,然后将css文件压缩,再然后生成css压缩文件的map文件最后就得到了我们的需要使用的min文件和一些奇葩浏览器要用到的map文件gulp的配置如下vargulp=require('gulp');vargulpLess=require('gulp-less');vargulpConcat=require('gulp-concat');vargulpSourcemaps=require('gulp-sourcemaps');vargulpMinifyCss=require('gulp-minify-css');vargulpRename=require('gulp-rename');gulp.task('less',function(){return&n...

gulp 实现 js、css,img 合并和压缩

前提条件,知道如何安装nodejs、gulp,这里不做介绍,可以自行google实现此功能需要安装的gulp工具有如下npminstallgulp-htmlmingulp-imageminimagemin-pngcrushgulp-minify-cssgulp-jshintgulp-uglifygulp-concatgulp-renamegulp-notify--save-devgulp配置文件如下//在你的项目根目录下创建gulpfile.js,代码如下://引入gulpvargulp=require('gulp');//引入组件varhtmlmin=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'),//文件合并r...

Grunt 实现 js、css 合并和压缩

前提条件,知道如何安装nodejs、grunt,这里不做介绍,可以自行google实现此功能需要安装的Grunt工具有如下grunt-contrib-concatgrunt-contrib-uglifygrunt-css1、实现js的合并和压缩module.exports=function(grunt){//配置grunt.initConfig({pkg:grunt.file.readJSON('package.json'),concat:{//合并文件domop:{src:['assets/test1.js','assets/test2.js'],//源文件目录dest:'dest/result.js'//目标文件目录,自动创建dest目录}},uglify:{//压缩文件options:{banner:'/*!<%=pkg.name%><%=grunt.template.today("yyyy-mm-dd")%>*/\n'},bu...

ThinkPHP css js image 等文件 简单配置

首先介绍一下我的Thinkphp的目录结构|--ThinkPHP(ThinkPHP目录)|--Financial(项目目录)|--Common|--Conf|--Lang|--Lib|--Public|--Css|--Js|--Images|--Bootstrap|--Runtime|--Tpl|--Uploadsindex.phpfavicon.ico目录结构如上:index.php的文件配置如下:<?phpdefine('APP_NAME','');define('APP_PATH','/home/davidzhang/local.ubuntu.new.financial.com/');define('APP_DEBUG',TRUE);//开启调试模式require'../ThinkPHP/ThinkPHP.php';?>/hom...

Yii添加 meta信息,添加js,css文件

其实很简答的,只要你想加入类似keywords或者content的内容的meta的话是很简单的,代码如下:Yii::app()->clientScript->registerMetaTag('Contentdescription',"description");Yii::app()->clientScript->registerMetaTag("新媒体指数、[name]vlinkage投票排名[rank]","keywords");添加js,css文件Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/my.css');Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/my.js');

前端技能 Google Fonts API @font-css

开篇之前,先来几个链接http://www.font-face.com/#google_announcement对于前端,强大不是一般般般的。先来看几个例子<html><head><linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?family=Tangerine"><style>body{font-family:'Tangerine',serif;font-size:48px;}</style></head><body><div>Makingthe&n...

学习下CSS选择器 奇偶匹配nth-child(even)

CSS3伪类选择器:nth-child()简单的归纳下nth-child()的几种用法。第一:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。(EG)li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/第二:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。(EG)li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/第三:nth-child(an+b)与:nth-child(an-b)先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。...

CSS中最合理ID/CLASS的命名规范

先看一个例子:.l-123f{color:red;}如果你第一次看到这个类名,你能在css文件立刻找到这个class吗?估计很难,因为这个类的名称只是某一个人能理解的符号再没有其他意义,所以这里没有一个准确的方法能够让你立即说出来。让我们来看下这个类名定义:.right-red{color:red;}你可能很明确的知道这个class选择符的所起的作用。但是这里还有个问题,当你在一星期的时间需要重新设计。在重新设计的时候,这个模块被放置到了左边,而且还是绿色。这个类就不再有存在的价值。所以现在不得不选择,要么改变所有的属性值,要么放着它不动,这可能导致混乱。最好不要在你的...