1. gulp

1.1. 参考

http://nodejs.cn/api/
https://www.gulpjs.com.cn/docs/
http://nodejs.cn/api/stream.html

1.2. 全局安装 gulp

npm install --global gulp

1.3. 作为项目依赖安装

npm install --save-dev gulp

1.4. 创建一个名为 gulpfile.js 的文件:

按照自己的文件配置来


var gulp = require('gulp');
var uglify = require('gulp-uglify'); // npm install --save gulp-uglify
var minfy = require('gulp-minify-css');// npm install --save gulp-minify-css ,gulp-clean-css
var concat = require('gulp-concat');// npm install --save gulp-concat
var smushit = require('gulp-smushit');// npm install --save gulp-smushit

// 创建默认任务
gulp.task('default', function() {

    //js 压缩
     gulp.src('js/*.js')
         .pipe(uglify())
         .pipe(gulp.dest('./static/js'));

     //css 压缩
     gulp.src('css/*.css')
         .pipe(minfy())
         .pipe(gulp.dest('./static/css'));

      //合并你所需要的js文件放到dist/js文件夹下
      gulp.src([
                 './static/js/jquery-1.9.1.min.js',
                 './static/js/bootstrap-table.js'
             ]).pipe(concat('main.js')).pipe(gulp.dest('./dist/js'));
      //合并你所需要的css文件放到dist/css文件夹下
      gulp.src([
            './static/css/bootstrap.min.css',
            './static/css/W_style.css'
            ]).pipe(concat('main.css')).pipe(gulp.dest('./dist/css'));
       });

//images 压缩
gulp.task('images',function(){
    gulp.src('images/*.*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('dist/images')).on( 'end', () => {
                    console.log('images_end');
            });
})

2. 执行

gulp
#gulp default  等同 gulp

gulp images //images 压缩

results matching ""

    No results matching ""