前端自动化之--gulp

来源：互联网发布：手机编辑音频软件编辑：程序博客网时间：2024/05/16 02:02

css,js和图片的压缩以及精灵图的制作都是前端工程师绕不开的坑，现在的前端早已不是刀耕火种的时代，对于这些机械化没有技术含量的工作我们要坚决说no，解放自己的双手去做跟多有意义的事情，今天就介绍一款流行的前端自动化工具gulp，相信它一定能帮你大大提升工作效率，废话不多说直接上步骤：

安装gulp和gulp的宝宝们

npm install gulp jshint gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev npm install gulp-autoprefixer gulp-imagemin gulp-notify gulp-livereload gulp-cache gulp.spritesmith del --save-dev

2、配置gulpfile.js

var gulp = require('gulp'),  autoprefixer = require('gulp-autoprefixer'),  minifycss = require('gulp-clean-css'), //压缩css  jshint = require('gulp-jshint'), //js代码校验  uglify = require('gulp-uglify'), //压缩JS  imagemin = require('gulp-imagemin'), //压缩图片  rename = require('gulp-rename'), //合并js文件  concat = require('gulp-concat'),  notify = require('gulp-notify'),  cache = require('gulp-cache'),  livereload = require('gulp-livereload'),  spritesmith = require('gulp.spritesmith'),  del = require('del');// cssgulp.task('css', function() {  return gulp.src('src/css/**/*.css')    .pipe(minifycss())    .pipe(gulp.dest('dist/css'))    .pipe(notify({      message: 'css task complete'    }));});// jsgulp.task('js', function() {  return gulp.src('src/js/*.js')    .pipe(jshint())    .pipe(jshint.reporter('default'))    .pipe(concat('main.js'))    .pipe(rename({      suffix: '.min'    }))    .pipe(uglify())    .pipe(gulp.dest('dist/js'))    .pipe(notify({      message: 'js task complete'    }));});// imggulp.task('img', function() {  return gulp.src('src/img/**/*')    .pipe(cache(imagemin({      optimizationLevel: 3,      progressive: true,      interlaced: true    })))    .pipe(gulp.dest('dist/img'))    .pipe(notify({      message: 'img task complete'    }));});//spritegulp.task('s', function () {  var spriteData = gulp.src('src/img/sprite/*.png').pipe(spritesmith({    imgName: 'sprite.png',    cssName: 'sprite.css'  }));  return spriteData.pipe(gulp.dest('dist/img'));});// Clean 任务执行前，先清除之前生成的文件gulp.task('clean', function(cb) {  del(['dist/css', 'dist/js', 'dist/img'], cb)});// Default task 设置默认任务gulp.task('default', function() {  gulp.start('css', 'js', 'img','s');});监听文件: // Watch  gulp.task('watch', function() {    // Watch .scss files    gulp.watch('src/**/*.css', ['css']);    // Watch .js files    gulp.watch('src/**/*.js', ['js']);    // Watch image files    gulp.watch('src/img/**/*', ['img']);    // Create LiveReload server    livereload.listen();    // Watch any files in dist/, reload on change    gulp.watch(['dist/**']).on('change', livereload.changed);  });

3、直接在cmd中运行gulp。
成功后会生成一个dist文件夹，你要的东西全部都在这里面了，是不是很神奇啊。
代码具体含义都已经标注了，相信聪明的你看会肯定会明白的。

0 0