[关闭]
@EncyKe 2017-03-10T03:32:03.000000Z 字数 4688 阅读 1172

手记:gulp 入门

#手记



1. 简介


2. 常用 gulp 前端相关插件

  1. npm install gulp-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

3. gulpfile.js 详解

3.0. 项目目录树

  1. .
  2. ├── README.md
  3. ├── dist
  4.    ├── css
  5.       └── app.min.css
  6.    ├── img
  7.       ├── Sample-bg-large.jpeg
  8.       └── Sample-bg-mobile.png
  9.    ├── index.html
  10.    └── js
  11.    └── app.min.js
  12. ├── gulpfile.js
  13. ├── package.json
  14. └── src
  15. ├── css
  16.    └── app.scss
  17. ├── img
  18.    ├── Sample-bg-large.jpeg
  19.    └── Sample-bg-mobile.png
  20. └── js
  21. └── app.js

3.1. 引入插件

  1. var gulp = require('gulp');
  2. var sass = require('gulp-sass');
  3. var autoprefixer = require('gulp-autoprefixer');
  4. var minifycss = require('gulp-minify-css');
  5. var jshint = require('gulp-jshint');
  6. var uglify = require('gulp-uglify');
  7. var imagemin = require('gulp-imagemin');
  8. var rename = require('gulp-rename');
  9. var concat = require('gulp-concat');
  10. var notify = require('gulp-notify');
  11. var cache = require('gulp-cache');
  12. var livereload = require('gulp-livereload');
  13. var del = require('del');

3.2. gulp.task() API

3.3. CSS 相关:编译 SASS、自动追加前缀以及压缩

  1. gulp.task('css', function() {
  2. return gulp.src('./src/css/*.scss')
  3. .pipe(sass())
  4. .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
  5. .pipe(minifycss())
  6. .pipe(rename({suffix: '.min'}))
  7. .pipe(gulp.dest('./dist/css'))
  8. .pipe(notify({ message: 'css task is completed!' }));
  9. });

3.4. JS 相关:代码校检、合并及压缩

  1. gulp.task('js', function() {
  2. return gulp.src('./src/js/*.js')
  3. .pipe(jshint())
  4. .pipe(jshint.reporter('default'))
  5. .pipe(uglify())
  6. .pipe(rename({suffix: '.min'}))
  7. .pipe(gulp.dest('./dist/js'))
  8. .pipe(notify({ message: 'js task is completed!' }));
  9. });

3.5. 图片压缩

  1. gulp.task('img', function() {
  2. return gulp.src('./src/img/*')
  3. .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
  4. .pipe(gulp.dest('./dist/img'))
  5. .pipe(notify({ message: 'img task is completed' }));
  6. });

3.6. 监听文件变化

  1. gulp.task('watch', function() {
  2. gulp.watch('./src/css/*.scss', ['css']);
  3. gulp.watch('./src/js/*.js', ['js']);
  4. gulp.watch('./src/img/*', ['img']);
  5. livereload.listen();
  6. gulp.watch(['./dist/**']).on('change', livereload.changed);
  7. });

3.7. 设置默认任务

  1. gulp.task('dev', ['css', 'js', 'img'], function() {
  2. gulp.start('watch');
  3. });

3.8. 完整的 gulpfile.js

  1. var gulp = require('gulp');
  2. var sass = require('gulp-sass');
  3. var autoprefixer = require('gulp-autoprefixer');
  4. var minifycss = require('gulp-minify-css');
  5. var jshint = require('gulp-jshint');
  6. var uglify = require('gulp-uglify');
  7. var imagemin = require('gulp-imagemin');
  8. var rename = require('gulp-rename');
  9. var concat = require('gulp-concat');
  10. var notify = require('gulp-notify');
  11. var cache = require('gulp-cache');
  12. var livereload = require('gulp-livereload');
  13. var del = require('del');
  14. /**
  15. * @description `gulp dev` 任务
  16. * 1. 编译 SASS 并压缩成 CSS;
  17. * 2. 压缩、校检 JS;
  18. * 3. 压缩图片;
  19. * 4. 监听文件变化持续执行;
  20. */
  21. gulp.task('dev', ['css', 'js', 'img'], function() {
  22. gulp.start('watch');
  23. });
  24. /**
  25. * @description `gulp watch` 任务:监听文件变化执行对应的任务
  26. */
  27. gulp.task('watch', function() {
  28. gulp.watch('./src/css/*.scss', ['css']);
  29. gulp.watch('./src/js/*.js', ['js']);
  30. gulp.watch('./src/img/*', ['img']);
  31. // livereload.listen();
  32. // gulp.watch(['./dist/**']).on('change', livereload.changed);
  33. });
  34. /**
  35. * @description 清空文件
  36. */
  37. gulp.task('clean', function(cb) {
  38. del(['./dist/css', './dist/js', './dist/img'], cb);
  39. });
  40. /**
  41. * @description `gulp css` 任务:CSS 相关
  42. * 1. 编译 SASS;
  43. * 2. 自动追加前缀;
  44. * 3. 压缩 CSS;
  45. */
  46. gulp.task('css', function() {
  47. return gulp.src('./src/css/*.scss')
  48. .pipe(sass())
  49. .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
  50. .pipe(minifycss())
  51. .pipe(rename({suffix: '.min'}))
  52. .pipe(gulp.dest('./dist/css'))
  53. .pipe(notify({ message: 'css task is completed!' }));
  54. });
  55. /**
  56. * @description `gulp js` 任务:JS 相关
  57. * 1. JS 代码校检;
  58. * 2. 合并压缩;
  59. */
  60. gulp.task('js', function() {
  61. return gulp.src('./src/js/*.js')
  62. .pipe(jshint())
  63. .pipe(jshint.reporter('default'))
  64. .pipe(uglify())
  65. .pipe(rename({suffix: '.min'}))
  66. .pipe(gulp.dest('./dist/js'))
  67. .pipe(notify({ message: 'js task is completed!' }));
  68. });
  69. /**
  70. * @description `gulp img` 任务:图片压缩
  71. */
  72. gulp.task('img', function() {
  73. return gulp.src('./src/img/*')
  74. .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
  75. .pipe(gulp.dest('./dist/img'))
  76. .pipe(notify({ message: 'img task is completed' }));
  77. });

附:参考

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注