gulp使用记录

gulp使用记录

安装步骤

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

• 安装nodejs（见官网 nodejs）
• 全局安装gulp

npm install gulp -g

• 查看gulp是否安装成功

gulp -v

• 初始化项目:package.json

npm init

• 本地安装gulp

npm install gulp --save-dev

• 本地安装gulp插件

npm install gulp-less --save-dev

• 新建gulpfile.js文件

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less'); //less转化为css
    sass = require('gulp-ruby-sass'); //sass转化为css
    css = require('gulp-minify-css'); //压缩css
    uglify = require('gulp-uglify'); //压缩js代码
    concat = require('gulp-concat'); //合并js
    jshint = require('gulp-jshint'); //校验js
    htmlmin = require('gulp-htmlmin'); //压缩html
    imagemin = require('gulp-imagemin'); //压缩image
    pngquant = require('imagemin-pngquant'); //深度压缩png图片
    cache = require('gulp-cache'); //只压缩修改了的图片
    rev = require('gulp-rev-append'); //给html中引用的url添加MD5版本号
    notify = require('gulp-notify'); //更改提醒
    livereload = require('gulp-livereload');//自动刷新页面
    clean = require('gulp-rimraf');//清除文件

// Styles任务
gulp.task('styles', function() {
    //编译sass
    // return gulp.src('css/*.scss')
    // .pipe(sass())
    // 转化less为css
    return gulp.src(['css/*','css/**/*']) 
    .pipe(less())
    //保存未压缩文件到我们指定的目录下面
    .pipe(gulp.dest('css'))
    //压缩样式文件
    .pipe(css())
    //输出压缩文件到指定目录
    .pipe(gulp.dest('min/css'))
    //提醒任务完成
    // .pipe(notify({ message: 'Styles task complete' }));
});

// Scripts任务
gulp.task('scripts', function() {
    //js代码校验
    return gulp.src(['js/*.js','js/**/*.js','!js/libs.*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    //js代码合并
    // .pipe(concat('all.js'))
    //压缩脚本文件
    .pipe(uglify())
    //输出压缩文件到指定目录
    .pipe(gulp.dest('min/js'))
    //提醒任务完成
    // .pipe(notify({ message: 'Scripts task complete' }));
});

// Images
gulp.task('images', function () {
    return gulp.src(['images/*.{png,jpg,gif,ico}','images/**/*.{png,jpg,gif,ico}'])
        .pipe(cache(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            svgoPlugins: [{removeViewBox: false}], //不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
        })))
        .pipe(gulp.dest('min/images'))
        // .pipe(notify({ message: 'Images task complete' }));
});

// htmls
gulp.task('htmls', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('page/*.{html,htm,jsp}')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('min/page'))
        .pipe(rev())
        .pipe(gulp.dest('min/page'))
        // .pipe(notify({ message: 'html task complete' }));
});

// Default task
gulp.task('default', function() {
    gulp.start('styles', 'scripts', 'images','htmls');
});

// Watch
gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('css/*.scss', ['styles']);
  // Watch .js files
  gulp.watch('js/*.js', ['scripts']);
  // Watch image files
  gulp.watch('images/*', ['images']);
  // Watch html files
  gulp.watch('page/*', ['htmls']);
  // Create LiveReload server
  livereload.listen();
  // Watch any files in assets/, reload on change
  gulp.watch(['assets/*']).on('change', livereload.changed);
});

//clean
gulp.task('clean', function () {
    return gulp.src(['min/**','min/**/**'], {read: false})
        .pipe(clean());
});

• 运行gulp

gulp //运行完整gulpfile.js
gulp default //运行default中的function
gulp clean //运行clean这个function