Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的。

首先要确保pc上装有node、npm,如何安装node、npm,这里不做介绍,不会自行google百度

node -v 出现版本就证明已经安装了
npm -v 出现版本就证明已经安装了

安装gulp

npm install gulp -g (全局环境)
npm install gulp --save-dev (项目环境)

在项目中安装需要的gulp插件,如果只压缩就安装如下即可

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

项目根目录下创建gulpfile.js,代码如下:

var gulp = require('gulp'),  // 引入 gulp
    minifycss = require('gulp-minify-css'), // css压缩
    concat = require('gulp-concat'), // 文件合并
    uglify = require('gulp-uglify'), // js压缩
    rename = require('gulp-rename'), // 文件更名
    del    = require('del'); 		 // 删除
    notify = require('gulp-notify'); // 提示信息

// 默认命令,在终端中输入gulp后,执行。
gulp.task('default', function() {
    gulp.start('css', 'js');
});


// 合并、压缩、重命名css
gulp.task('css', function() {
  return gulp.src('assets/css/*.css')  			// 压缩的文件
    .pipe(concat('all.css'))					// 文件合并		
    .pipe(gulp.dest('build/assets/css'))		// 输出文件夹
    .pipe(rename({ suffix: '.min' }))			// 文件更名
    .pipe(minifycss())							// 压缩	
    .pipe(gulp.dest('build/assets/css'))		// 输出文件夹
    .pipe(notify({ message: 'css task ok' }));	// 提示信息
});

// 合并、压缩js文件
gulp.task('js', function() {
  // return gulp.src('assets/js/*.js')
  return gulp.src([
	'assets/js/jquery.min.js',
	'assets/js/bootstrap.min.js',
	'assets/js/social-share.min.js',
	'assets/js/js.js',
  ])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('build/assets/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('build/assets/js'))
    .pipe(notify({ message: 'js task ok' }));
});
 

在终端中输入gulp后,执行下看看效果吧!

更多的使用自行搜索吧!