做3d建模贴图找哪个网站,珠海建设网站公司简介,wordpress美化文章内相册,建筑案例分析网站以前在做代码优化的时候#xff0c;一般都用一些网上的在线工具来完成#xff0c;写LESS的时候#xff0c;一般用Koala来编译#xff0c;感觉用起来也挺不错的。但是现在构建工具的出现#xff0c;让以前做的那些繁琐操作变的更方便一些了#xff0c;我在这里也用构建工具…以前在做代码优化的时候一般都用一些网上的在线工具来完成写LESS的时候一般用Koala来编译感觉用起来也挺不错的。但是现在构建工具的出现让以前做的那些繁琐操作变的更方便一些了我在这里也用构建工具来完成一下我以前一些前端的工作。这里我选用了Gulp来使用。 实例概要
代码压缩CSS自动加前缀LESS编译地址版本追加文件合并文件修改自动刷新页面 Gulp一些入门知识
这里还是说一下Gulp的一些入门的必备知识方便看后文的理解。
Gulp是一款自动构建工具需要在Node.js的环境下运行常用的API方法并不多很快就能熟记用到的大部分功能都是依靠插件来完成的。
Gulp的插件需要用npm来进行安装
npm install name [-g] [--save-dev]-g全局安装通常只在项目下安装即可所以不用加这个参数--save-dev用于将依赖包保存到项目下的package.json文件中-dev用来区分开发模式和生产模式下用到的模块。指定则保存到package.json的devDependencies节点不指定-dev将保存至dependencies节点。
使用Gulp需要先在项目下安装Gulp模块。
初始化项目环境
npm init进入项目安装gulp
npm install gulp --save-dev创建gulp配置文件gulpfile.js Gulp 官网 实例一编译LESS
用到插件gulp-less 安装命令install gulp-less --save-dev Github: https: //github.com/plus3network/gulp-less gulpfile.js代码
//引入必要文件
var gulp require(gulp),less require(gulp-less);//创建任务
gulp.task(testLess, function(){gulp.src(src/less/*.less) //所有src/less下的less文件.pipe(less()) //执行less编译.pipe(gulp.dest(src/css)) //将编译后的文件写到目的目录下
});
现在在src/less下创建less文件并编码然后在CLI下执行
gulp testLess即可在src/css下看到已经编译完成的css文件。 实例二在LESS中加入自动前缀
方法一gulp-autoprefixer 安装命令install gulp-autoprefixer --save-dev Github: https: //github.com/sindresorhus/gulp-autoprefixer gulpfile.js代码
var gulp require(gulp),less require(gulp-less),autoprefixer require(gulp-autoprefixer);gulp.task(testLess, function(){gulp.src(src/less/*.less).pipe(less()).pipe(autoprefixer({browsers: [last 2 versions, Android 4.0]})) //自动加入前缀.pipe(gulp.dest(src/css))
});
在CLI下执行
gulp testLess编译的文件中已经自动加入了前缀这对编写CSS能够提高很大的效率。
方法二less-plugin-autoprefix
这里用的是less的插件。 安装命令install less-plugin-autoprefix --save-dev Github: https: //github.com/less/less-plugin-autoprefix gulpfile.js代码
var gulp require(gulp),less require(gulp-less),LessAutoprefix require(less-plugin-autoprefix);gulp.task(testLess, function(){gulp.src(src/less/*.less).pipe(less({plugins: [new LessAutoprefix({ browsers: [last 2 versions] })]})).pipe(gulp.dest(src/css))
});自动前缀需要自行设置一些编译参数详细了解可以看官方GitHub两种方法的配置基本一样。
这个插件可单独应用到为css加前缀。 实例三在LESS中加入代码压缩 安装命令install gulp-minify-css --save-dev Github: https: //github.com/less/less-plugin-autoprefix 这个插件实际上是用的clean-csshttps: //github.com/jakubpawlowicz/clean-css。
gulpfile.js代码
var gulp require(gulp),less require(gulp-less),autoprefixer require(gulp-autoprefixer),minifycss require(gulp-minify-css);gulp.task(testLess, [], function(){gulp.src(src/less/*.less).pipe(less()).pipe(autoprefixer({browsers: [last 2 versions, Android 4.0]})).pipe(gulp.dest(src/css)).pipe(minifycss()); //压缩
}); 实例四为链接文件追加版本号 安装命令install gulp-rev-append --save-dev Github: https: //github.com/bustardcelly/gulp-rev-append 为在网页中链接的资源文件路径追加版本号可以用于防止缓存文件。
版本号是依据文件内容进行MD5后的结果所以只为文件内容变动版本号就变动。
工作方式(?:href|src)(.*)[\?]rev(.*)[\]
var gulp require(gulp), rev require(gulp-rev-append);gulp.task(testRev, function(){gulp.src(src/index.html).pipe(rev()).pipe(gulp.dest(src/rev));
});
要执行这个功能需要在链接资源地址后加入?revhash
!-- inde.html--
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet typetext/css hrefcss/index.css?revhash/script
/head
bodyimg srca.jpg?revhash
/body
/html
!-- 编译后的文件 --
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet typetext/css hrefcss/index.css?rev2e151da214ef1a3563abdc2cb8c23d7f
/head
bodyimg srca.jpg?revd41d8cd98f00b204e9800998ecf8427e
/body
/html
需要注意的是如果链接的资源并不存在那么是无法追加版本号的。 实例五文件合并 安装命令install gulp-concat --save-dev Github: https: //github.com/wearefractal/gulp-concat 为了生产模式下为了减少网络请求通常将同类文件进行合并例如合并JS、CSS。
合并JS
var gulp require(gulp),concat require(gulp-concat);gulp.task(concatJs, function(){//gulp.src(src/js/*.js)//这种方式合并文件的先后顺序不能控制gulp.src([src/js/js1.js,src/js/js2.js]) //按顺序将文件写入数组做为参数.pipe(concat(all.js)) //合并后生成的文件.pipe(gulp.dest(src/css))
});合并CSS
var gulp require(gulp),concat require(gulp-concat);gulp.task(concatCss, function(){//gulp.src(src/css/*.css)gulp.src([src/css/css1.css,src/css/css2.css]).pipe(concat(all.css)) .pipe(gulp.dest(src/css))
});实例六文件改变 自动刷新浏览器 安装命令install gulp-connect --save-dev Github: https: //github.com/AveVlad/gulp-connect/ 当我们在做页面编码时为了实时查看代码效果需要不断的刷新浏览器十分繁琐。那有没有什么工具可以监控文件只要文件发生变化就及时自动刷新浏览器的 当然有了这下我们就可以释放F5了。 var gulp require(gulp),connect require(gulp-connect);//创建服务任务
gulp.task(connect, function(){connect.server({//这里有配置端口和主机的选项我这里就按默认的来了livereload: true //即时刷新});
});gulp.task(css, function(){gulp.src(src/css/*.css).pipe(connect.reload()); //重新加载
});//css文件监测
gulp.task(fileWatch, function(){gulp.watch(src/**/*.css, [css]);
});//默认任务启动
gulp.task(default, [ connect,fileWatch]); //先打开连接再监测文件
这里直接运行gulp即可因为没有配置端口所以根据CLI中的提示在浏览器中打开地址即可。此命令不直接打开浏览器。 当在修改CSS文件并保存后浏览器就会自动刷新了。
LiveReload是一个WebSockets协议 结语
好了在Gulp中常用的前端操作基本都写了大家可以根据自己的需求去定制。想进行更详细的配置可以参考每个插件中的GitHub地址。 博客名称王乐平 技术博客 CSDN博客地址http://blog.csdn.net/lecepin
