gulp 初级教程 会着让道

1.全局安装一遍：

$ npm install gulp -g

2.cd 到项目的根目录 （如果跟程序配合，程序先建好程序的话，你可找到放js和css还有images的文件夹。）我当时就在这挡住了，不知道怎么建立文件夹。

我的目录是D:\testDev\gulp

$ npm install gulp --save-dev

3.安装插件

$ 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

• sass的编译（gulp-ruby-sass）
• 自动添加css前缀（gulp-autoprefixer）
• 压缩css（gulp-minify-css）
• js代码校验（gulp-jshint）
• 合并js文件（gulp-concat）
• 压缩js代码（gulp-uglify）
• 压缩图片（gulp-imagemin）
• 自动刷新页面（gulp-livereload）
• 图片缓存，只有图片替换了才压缩（gulp-cache）
• 更改提醒（gulp-notify）
• 清除文件（del）

4。建立gulpfile.js手动建立

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');

gulp.task('minifycss', function() {
    return gulp.src('dev/css/*.css')      //压缩的文件
        .pipe(concat('main.css')) //合并文件
        .pipe(minifycss())//压缩css
        .pipe(gulp.dest('dist/minifyed/css/'))   //输出文件夹
});

gulp.task('minifyjs', function() {
    return gulp.src('dev/js/*.js')
        .pipe(concat('main.js'))
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('dist/minifyed/js'));  //输出
});

gulp.task('clean', function(cb) {
    del(['dist/minifyed/css', 'dist/minifyed/js'], cb)
});

gulp.task('default', ['clean'], function() {
    gulp.start('minifycss', 'minifyjs');
});

5.运行命令

$ gulp

可以看见奇迹了。

可以单独运行，，，$ gulp minifyjs

转载于:https://www.cnblogs.com/skmtpsh/p/gulp.html