• 3步学会用gulp


    1.安装gulp

    安装gulp到全局:npm install -g gulp
    安装gulp到某个项目:npm install --save gulp

    注意:请先安装nodejs(自带npm)

    2.创建gulpfile.js

    //在你的项目根目录下创建gulpfile.js,代码如下:
    
    // 引入 gulp
    var gulp = require('gulp');
    
    // 引入组件
    var htmlmin = require('gulp-htmlmin'), //html压缩
        imagemin = require('gulp-imagemin'),//图片压缩
        pngcrush = require('imagemin-pngcrush'),
        minifycss = require('gulp-minify-css'),//css压缩
        jshint = require('gulp-jshint'),//js检测
        uglify = require('gulp-uglify'),//js压缩
        concat = require('gulp-concat'),//文件合并
        rename = require('gulp-rename'),//文件更名
        notify = require('gulp-notify');//提示信息
    
    // 压缩html
    gulp.task('html', function() {
      return gulp.src('src/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('./dest'))
        .pipe(notify({ message: 'html task ok' }));
    
    });
    
    // 压缩图片
    gulp.task('img', function() {
      return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest('./dest/images/'))
        .pipe(notify({ message: 'img task ok' }));
    });
    
    // 合并、压缩、重命名css
    gulp.task('css', function() {
      return gulp.src('src/css/*.css')
        .pipe(concat('main.css'))
        .pipe(gulp.dest('dest/css'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('dest/css'))
        .pipe(notify({ message: 'css task ok' }));
    });
    
    // 检查js
    gulp.task('lint', function() {
      return gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(notify({ message: 'lint task ok' }));
    });
    
    // 合并、压缩js文件
    gulp.task('js', function() {
      return gulp.src('src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dest/js'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest('dest/js'))
        .pipe(notify({ message: 'js task ok' }));
    });
    
    // 默认任务
    gulp.task('default', function(){
      gulp.run('img', 'css', 'lint', 'js', 'html');
    
      // 监听html文件变化
      gulp.watch('src/*.html', function(){
        gulp.run('html');
      });
    
      // Watch .css files
      gulp.watch('src/css/*.css', ['css']);
    
      // Watch .js files
      gulp.watch('src/js/*.js', ['lint', 'js']);
    
      // Watch image files
      gulp.watch('src/images/*', ['img']);
    });

    3.安装依赖

    //如上gulpfile.js安装依赖如下,cd切换到你的项目下然后:
    npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev

    恭喜你,你已经学会使用gulp了,例如:执行默认任务: gulp, 合并压缩css: gulp css

    gulp官网:http://gulpjs.com/

    gulp插件:http://gulpjs.com/plugins/

  • 相关阅读:
    实战演练:通过伪列、虚拟列实现SQL优化
    python try else
    Prince2是怎么考试的?
    Prince2是怎么考试的?
    Prince2是怎么考试的?
    Prince2是怎么考试的?
    拦截器
    拦截器
    拦截器
    拦截器
  • 原文地址:https://www.cnblogs.com/jununx/p/4024556.html
走看看 - 开发者的网上家园