你的位置:首页 > 网页设计

[网页设计]gulp 之一 安装及简单CSS,JS文件合并压缩


最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些。(个人感受),以下是grunt和gulp构建方式和原理:

grunt

基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改文件,写文件,,,读文件,修改文件,写文件..... 需要进行大量IO操作。

gulp

基于流(streaming)的方式构建,首先读取文件,编译压缩文件(流的方式),最终将结果生成到配置的文件目录下。

安装gulp

假设已经安装了node 和npm (淘宝的cnpm很适合国内使用)。

1、首页全局安装gulp。

1 npm install --global gulp 

2、其次局部安装gulp。(注:局部安装是安装到你项目的根目录,这是很多教程没有清晰表明)

npm install gulp --save-dev

3、在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');gulp.task('default', function() { // 将你的默认的任务代码放在这});

4、运行gulp。(默认的名为 default 的任务(task)将会被运行,想要单独执行特定的任务(task),请输入 gulp <task> <othertask>)

gulp

 

合并和压缩JS、CSS文件

压缩JS,CSS文件需要引用如下组件:

gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹

gulp-notify:提示

安装组件项目目录,通过cd 进入项目的根目录,执行下边的npm安装组件

npm install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

在上述 gulpfile.js 的文件里,写入:

// 引入 gulp及组件var gulp=require('gulp'), //gulp基础库  minifycss=require('gulp-minify-css'),  //css压缩  concat=require('gulp-concat'),  //合并文件  uglify=require('gulp-uglify'),  //js压缩  rename=require('gulp-rename'),  //文件重命名  jshint=require('gulp-jshint'),  //js检查  notify=require('gulp-notify');  //提示gulp.task('default',function(){  gulp.start('minifycss','minifyjs');}); //css处理gulp.task('minifycss',function(){  return gulp.src('htdocs/kunpeng/static/css/*.css')   //设置css    .pipe(concat('order_query.css'))   //合并css文件到"order_query"    .pipe(gulp.dest('dist/styles'))      //设置输出路径    .pipe(rename({suffix:'.min'}))     //修改文件名    .pipe(minifycss())          //压缩文件    .pipe(gulp.dest('dist/styles'))      //输出文件目录    .pipe(notify({message:'css task ok'}));  //提示成功});//JS处理gulp.task('minifyjs',function(){  return gulp.src(['/static/js/juicer-min.js','/static/js/bootstrap.min.js','/static/js/bootstrap-datetimepicker.min.js','/static/js/order_query.js']) //选择合并的JS    .pipe(concat('order_query.js'))  //合并js    .pipe(gulp.dest(''dist/js'))     //输出    .pipe(rename({suffix:'.min'}))   //重命名    .pipe(uglify())          //压缩    .pipe(gulp.dest('dist/js'))      //输出     .pipe(notify({message:"js task ok"}));  //提示});

 

运行

gulp