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
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

gulp 初级教程 会着让道
gulp 初级教程 会着让道
上一篇:ruby编程语言-学习笔记1


下一篇:CentOS运维常用技能