文件目录
package.json
{ "name": "test", "version": "1.0.0", "description": "This is for study gulp project !", "homepage": "", "devDependencies": { "del": "^3.0.0", "gulp": "^3.9.1", "gulp-concat": "^2.6.1", "gulp-connect": "^5.5.0", "gulp-jshint": "^2.1.0", "gulp-less": "^3.5.0", "gulp-livereload": "^3.8.1", "gulp-minify-css": "^1.2.4", "gulp-rename": "^1.3.0", "gulp-uglify": "^3.0.0" } }
gulpfile.js
var gulp = require('gulp'), //本地安装gulp所用到的地方 less = require('gulp-less'), minifycss = require('gulp-minify-css'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), del = require('del'), connect = require('gulp-connect'), livereload = require('gulp-livereload'); gulp.task('minify_css',["clean"], function () { var cssSrc = ['src/styles/*.css']; return gulp.src(cssSrc) //压缩的文件 .pipe(concat('all.css')) //合并所有css到all.css .pipe(gulp.dest('gulp/css')) //输出文件夹 .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('gulp/css')); //执行压缩 }); //压缩js gulp.task('minify_js',["clean"], function() { var jsSrc = ['src/scripts/*.js','!src/scripts/*.src.js']; return gulp.src(jsSrc) .pipe(concat('all.js')) //合并所有js到all.js .pipe(gulp.dest('gulp/js')) //输出all.js到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest('gulp/js')); //输出 }); //执行压缩前,先删除以前压缩的文件 gulp.task('clean', function() { return del(['gulp/css/all.css', 'gulp/css/all.min.css', 'gulp/js/all.js', 'gulp/js/all.min.js']) }); // 压缩任务(gulp) gulp.task('default', function(){ gulp.run('minify_css', 'minify_js'); }); //定义html任务 gulp.task('html', function() { gulp.src('src/*.html') .pipe(livereload()); }); //定义css任务 gulp.task('css', function() { gulp.src('src/styles/*.css') .pipe(livereload()); }); // 定义js任务 gulp.task('js', function() { gulp.src('src/scripts/*.js') .pipe(livereload()); }); // 定义img任务 gulp.task('img', function() { gulp.src('src/images/*.jpg') .pipe(livereload()); });
// 定义监听任务(gulp watch)
gulp.task('watch', function() { livereload.listen(); // gulp.watch('src/styles/*.css', ['css']); gulp.watch('src/*.html', ['html']); gulp.watch('src/styles/*.css', ['css']); gulp.watch('src/scripts/*.js', ['js']); gulp.watch('src/images/*.jpg', ['img']); });
主要是理解原理,具体逻辑还是要自己写的
google监听的话,要下个插件LiveReload,打开页面点击插件即可