gulp 实现 js、css 合并和压缩
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' }));
});