gulp初试

1.要在node环境下

2.

全局安装npm install gulp -g   

项目中安装npm install gulp --save-dev 

3.安装插件

  • sass的编译(gulp-ruby-sass)
  • 自动添加css前缀(gulp-autoprefixer)
  • 压缩css(gulp-minify-css)
  • js代码校验(gulp-jshint)
  • 合并js文件(gulp-concat)
  • 压缩js代码(gulp-uglify)
  • 压缩图片(gulp-imagemin)
  • 自动刷新页面(gulp-livereload)
  • 图片缓存,只有图片替换了才压缩(gulp-cache)
    var gulp = require('gulp'),
        minifycss = require('gulp-minify-css'),
        concat = require('gulp-concat'),
        uglify = require('gulp-uglify'),
        rename = require('gulp-rename'),
        del = require('del');
    gulp.task('minifycss', function() {
        return gulp.src('css/*.css')      //压缩的文件
            .pipe(concat('main.css'))
            .pipe(minifycss())  //执行压缩
            .pipe(gulp.dest('minified/css')) ;  //输出文件夹
    });
    gulp.task('minifyjs', function() {
        return gulp.src('js/*.js')
            .pipe(concat('main.js'))    //合并所有js到main.js
            .pipe(gulp.dest('minified/js'))    //输出main.js到文件夹
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest('minified/js'));  //输出
    });
    gulp.task('clean', function(cb) {
        del(['minified/css', 'minified/js'], cb)
    });
    gulp.task('default',function() {
        gulp.start('minifycss', 'minifyjs');
    });
    

      在cmd中运行gulp即可。

  • 更改提醒(gulp-notify)
  • 清除文件(del)

安装这些插件需要运行如下命令:

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

4.在项目根目录创建gulpfile.js

 

posted on 2016-07-16 17:29  favorite00  阅读(146)  评论(0编辑  收藏  举报

导航