gulp使用总结

最新推荐文章于 2024-08-15 15:27:27 发布

weixin_34318272

最新推荐文章于 2024-08-15 15:27:27 发布

阅读量71

点赞数

文章标签： json python 开发工具

原文链接：https://my.oschina.net/u/2403701/blog/818455

版权

2019独角兽企业重金招聘Python工程师标准>>>

使用步骤

安装Node
1. 说明：gulp是基于nodejs，理所当然需要安装nodejs；
2. 安装：打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。
3. 命令行检查安装是否成功
  - node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；
  - npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。未能出现版本号，说明没安装成功；
4. 使用npm安装模块速度有些慢，可以使用淘宝的cnpm
5. ```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
  执行以上命令后安装插件可以用cnpm代替npm使用，速度会快很多
全局安装gulp插件
1. 说明：全局安装gulp目的是为了通过它执行gulp任务；
2. 安装：命令提示符执行npm install gulp -g；
3. 查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。
新建package.json文件
1. 说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
2. 可以手动新建该文件，也可命令行新建该文件npm init，建议命令行新建
本地安装gulp插件
1. 安装：定位目录命令后提示符执行npm install --save-dev；
2. 命令提示符执行npm install gulp-xxx --save-dev 多个插件可以用空格隔开npm install gulp-xxx gulp-xxx2 --save-dev
新建gulpfile.js文件
1. 说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。
2. gulp只有四个API
  - gulp.src(globs[, options])
  - gulp.dest(path[, options])
  - gulp.task(name [, deps] [, fn])
  - gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
运行gulp
1. 说明：命令提示符执行gulp 任务名称
2. 当执行gulp default或gulp将会调用default任务里的所有任务[‘task1’,’task2’]
webstorm或idea运行gulp
1. 使用说明：右键gulpfile.js -->选择”Show Gulp Tasks”-->Gulp窗口，若出现”No task found”，选择右键”Reload tasks”，双击运行即可。

常见的插件基本使用

压缩js文件 gulp-uglify 使用方法 .pipe(uglify())
变异sass gulp-sass 使用方法 .pipe(sass())
压缩css文件 gulp-minify-css 使用方法 .pipe(minifyCSS())
添加CSS浏览器前缀 gulp-autoprefixer 使用方法 .pipe(autoprefixer({browsers: 'last 2 versions'}))
压缩图片 gulp-imagemin 使用方法 .pipe(imagemin({progressive:true}))
合并文件 gulp-concat 使用方法 .pipe(concat('index.js'))
重命名文件 gulp-rename 使用方法 .pipe(rename('index.min.js'))
压缩html文件 gulp-html-minify 使用方法 .pipe(htmlminify())
js代码检查 gulp-jshint 使用方法 .pipe(jshint()).pipe(jshint.reporter('default'));

使用范例

  /*!
     * gulp
     * $ 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
     */
    // Load plugins
    var gulp = require('gulp'),
        sass = require('gulp-ruby-sass'),
        autoprefixer = require('gulp-autoprefixer'),
        minifycss = require('gulp-minify-css'),
        jshint = require('gulp-jshint'),
        uglify = require('gulp-uglify'),
        imagemin = require('gulp-imagemin'),
        rename = require('gulp-rename'),
        concat = require('gulp-concat'),
        notify = require('gulp-notify'),
        cache = require('gulp-cache'),
        livereload = require('gulp-livereload'),
        del = require('del');
    // Styles
    gulp.task('styles', function() {
      return gulp.src('src/styles/main.scss')
        .pipe(sass({ style: 'expanded', }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('dist/styles'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/styles'))
        .pipe(notify({ message: 'Styles task complete' }));
    });
    // Scripts
    gulp.task('scripts', function() {
      return gulp.src('src/scripts/**/*.js')
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/scripts'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/scripts'))
        .pipe(notify({ message: 'Scripts task complete' }));
    });
    // Images
    gulp.task('images', function() {
      return gulp.src('src/images/**/*')
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(gulp.dest('dist/images'))
        .pipe(notify({ message: 'Images task complete' }));
    });
    // Clean
    gulp.task('clean', function(cb) {
        del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
    });
    // Default task
    gulp.task('default', ['clean'], function() {
        gulp.start('styles', 'scripts', 'images');
    });
    // Watch
    gulp.task('watch', function() {
      // Watch .scss files
      gulp.watch('src/styles/**/*.scss', ['styles']);
      // Watch .js files
      gulp.watch('src/scripts/**/*.js', ['scripts']);
      // Watch image files
      gulp.watch('src/images/**/*', ['images']);
      // Create LiveReload server
      livereload.listen();
      // Watch any files in dist/, reload on change
      gulp.watch(['dist/**']).on('change', livereload.changed);
    });

转载于:https://my.oschina.net/u/2403701/blog/818455