gulp安装:
1. 首先确保安装了nodejs,然后执行以下命令全局安装gulp
npm install --global gulp
2. 然后进入我们的静态文件项目目录static-file,作为项目的开发依赖(devDependencies)安装:
npm install --save-dev gulp
3. 在项目根目录(static-file)下创建一个名为 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'); //提示
clean = require('gulp-clean');
创建任务
//css压缩处理
gulp.task('minifycss',function(){
return gulp.src('/Users/fantingsheng/static-file/css/slightech.css') //设置css
.pipe(concat('slightech'+myDate+'.css')) //合并css文件到"order_query"
.pipe(gulp.dest('dist/css')) //设置输出路径
.pipe(clean())
.pipe(rename({suffix:'.min'})) //修改文件名
.pipe(minifycss()) //压缩文件
.pipe(gulp.dest('dist/css')) //输出文件目录
.pipe(notify({message:'css task ok'})); //提示成功
});
//JS处理
gulp.task('minifyjs',function(){
return gulp.src([
'/Users/fantingsheng/static-file/js/slightech.js',
]) //选择合并的JS
.pipe(concat('slightech'+myDate+'.js')) //合并js
.pipe(gulp.dest('dist/js')) //输出
.pipe(clean())
.pipe(rename({suffix:'.min'})) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/js')) //输出
.pipe(notify({message:"js task ok"})); //提示
});
//合并js文件
gulp.task('scripts-concat',function(){
gulp.src([
'/Users/fantingsheng/static-file/js/bootstrap-carousel.min.js',
'/Users/fantingsheng/static-file/js/bootstrap-transition.min.js',
'/Users/fantingsheng/static-file/js/bootstrap-collapse.min.js',
'/Users/fantingsheng/static-file/js/bootstrap-dropdown.min.js',
'/Users/fantingsheng/static-file/js/bootstrap-modal.min.js',
'/Users/fantingsheng/static-file/js/bootstrap-tab.min.js'
])
.pipe(concat('bootstrap.min.js'))
.pipe(clean())
.pipe(gulp.dest('dist/js'))
.pipe(notify({message:'concat task ok'})); //提示成功
});
//合并css文件
gulp.task('styles-concat',function(){
gulp.src([
'/Users/fantingsheng/static-file/css/bootstrap.min.css',
'/Users/fantingsheng/static-file/css/bootstrap-responsive.min.css'
])
.pipe(concat('slightech-base.min.js'))
.pipe(clean())
.pipe(gulp.dest('dist/css'))
.pipe(notify({message:'concat task ok'})); //提示成功
});
添加需要执行的任务
gulp.task('default',function(){
gulp.start('minifycss','minifyjs','scripts-concat');
);
在项目跟目录下执行命令
gulp