前端开发工具集

@bingoogolapple 2016-02-15 10:55:57发表于 bingoogolapple/bingoogolapple.github.io FE工具软件开发环境

gulp

npm install -g gulp-cli
npm init
npm install gulp --save-dev

gulpfile.js

var gulp = require('gulp');

gulp.task('hello', function() {
  console.log('Hello Gulp!');
});
// gulp  默认执行default这个任务
gulp.task('default', ['hello']);

gulp.task('copyIndex', function() {
  return gulp.src('index.html').pipe(gulp.dest('dist'));
});
gulp.task('copyImages', function() {
  // return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'));
  // return gulp.src('images/*.{jpg,png}').pipe(gulp.dest('dist/images'));
  return gulp.src('images/**/*.{jpg,png}').pipe(gulp.dest('dist/images'));
});
gulp.task('copyFiles', function() {
  // !表示排除
  return gulp.src(['xml/*.xml', 'json/*.json', '!json/secret-*.json']).pipe(gulp.dest('dist/data'));
});
// 其他三个依赖的任务是同时执行的,build任务会在其他三个任务全部执行完成后才开始执行
gulp.task('build', ['copyIndex', 'copyImages', 'copyFiles'], function() {
  console.log('编译成功!');
});

// 文件有变化时自动执行任务
gulp.task('watch', function() {
  gulp.watch('index.html', ['copyIndex']);
  gulp.watch('images/**/*', ['copyImages']);
  gulp.watch(['xml/*.xml', 'json/*.json', '!json/secret-*.json'], ['copyFiles']);
});

gulp相关插件的使用

// npm install gulp-sass --save-dev
// npm install gulp-less --save-dev
// npm install gulp-connect --save-dev
// npm install gulp-concat --save-dev
// npm install gulp-uglify --save-dev
// npm install gulp-rename --save-dev
// npm install gulp-minify-css --save-dev
// npm install gulp-imagemin --save-dev

var gulp = require('gulp');
var sass = require('gulp-sass');
var less = require('gulp-less');
var connect = require('gulp-connect');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');

gulp.task('sass', function() {
  return gulp.src('stylesheets/**/*.scss')
  .pipe(sass())
  .pipe(minifyCss())
  .pipe(gulp.dest('dist/css'));
});
gulp.task('less', function() {
  return gulp.src('stylesheets/**/*.less')
  .pipe(sass())
  .pipe(gulp.dest('dist/css'));
});

gulp.task('server', function() {
  connect.server({
    root: 'dist',
    livereload: true
  });
});
gulp.task('copyIndex', function() {
  return gulp.src('index.html')
  .pipe(gulp.dest('dist'))
  .pipe(connect.reload());
});
gulp.task('watch', function() {
  gulp.watch('index.html', ['copyIndex']);
});
gulp.task('startServer', ['server', 'watch']);

gulp.task('concatUglifyJS', function() {
  return gulp.src(['javascript/**/*.js'])
  .pipe(concat('dist.js'))
  .pipe(gulp.dest('dist/js'))
  .pipe(uglify())
  .pipe(rename('dist.min.js'))
  .pipe(gulp.dest('dist/js'));
});

gulp.task('copyImages', function() {
  return gulp.src('images/**/*.{jpg,png}')
  .pipe(imagemin())
  .pipe(gulp.dest('dist/images'));
});