十一月十八日学习记录: nvm & gulp

nvm

  • 安装 Node

    nvm install [node 版本号 6.4.0/8.4.0]
    安装时会自动安装对应版本的npm

  • 卸载 Node

    nvm uninstall [version]

  • 切换 Node 版本

    mvn use [version]

gulp

gulp是一个前端开发自动化工具,在node环境下运行

  • 安装

    • 全局安装 gulp cli 工具

      npm install gulp -g

    • 项目本地安装 gulp 依赖

      npm install gulp –save-dev

  • 使用
    项目需要先初始化: npm init, 在安装gulp之前在项目根目录下建立gulpfile.js文件
    配置示例如下:
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var bs = require('browser-sync');

sass.compiler = require('node-sass');


var path = {
    'html': './templates/**/',
    'css': './src/css/',
    'js': './src/js/',
    'images': './src/images/',
    'css_dist': './dist/css',
    'js_dist': './dist/js',
    'image_dist': './dist/images/'
};

gulp.task('html', function(){
    gulp.src(path.html + '*.html')
    .pipe(bs.stream())
});

// gulp.task('css', function(){
//     gulp.src(path.css_dist + '*.scss')
//     // .pipe(cssnano())
//     .pipe(rename({'suffix': '.min', }))
//     .pipe(gulp.dest(path.css_dist))
//     .pipe(bs.stream())
// });

gulp.task('sass', function(){
    gulp.src(path.css + '*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(rename({'suffix': '.min'}))
    .pipe(gulp.dest(path.css_dist))
    .pipe(bs.stream())
})

gulp.task('js',function(){
    gulp.src(path.js + '*.js')
    .pipe(uglify())
    .pipe(rename({'suffix': '.min'}))
    .pipe(gulp.dest(path.js_dist))
    .pipe(bs.stream())
});

gulp.task('images', function(){
    gulp.src(path.images + '*.*')
    .pipe(cache(imagemin()))
    .pipe(gulp.dest(path.image_dist))
    .pipe(bs.stream())
});

gulp.task('watch', function(){
    gulp.watch(path.html + '*.html', ['html']);
    gulp.watch(path.css + '*.scss', ['sass']);
    gulp.watch(path.js + '*.js', ['js']);
    gulp.watch(path.images + '*.*', ['images']);
});

gulp.task('bs', function(){
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

gulp.task('default', ['bs', 'watch']);
  • 常用 gulp 插件
    代码压缩: gulp-cssnano, gulp-uglify,gulp-imagemin sass处理器:gulp-sass浏览器调试工具:browser-sync`

  • 运行命令

    gulp [任务名称] // 运行指定任务
    gulp // 运行默认任务