标签:
gulp 安装
1. 全局安装 gulp:
$ npm install --global gulp
2. 作为项目的开发依赖(devDependencies)安装:
$ npm install --save-dev gulp
3、在项目根目录下创建一个名为 gulpfile.js 的文件和package.json:
$ npm install --save-dev //安装package.json里所有插件
package.json的配置插件可以在下面网址找到:
https://www.npmjs.com/package/gulp-csso
gulpfile.js 文件
// 引入 gulp及组件 var gulp = require(‘gulp‘), //基础库 imagemin = require(‘gulp-imagemin‘), //图片压缩 browserSync = require(‘browser-sync‘);//自动刷新并且多个设备同步更新 sass = require(‘gulp-ruby-sass‘), //sass minifycss = require(‘gulp-minify-css‘), //css压缩 jshint = require(‘gulp-jshint‘), //js检查 uglify = require(‘gulp-uglify‘), //js压缩 rename = require(‘gulp-rename‘), //重命名 concat = require(‘gulp-concat‘), //合并文件 clean = require(‘gulp-clean‘), //清空文件夹 tinylr = require(‘tiny-lr‘), //本地Web 服务器 server = tinylr(), livereload = require(‘gulp-livereload‘); //网页自动刷新 reload=browserSync.reload; //加载package.json文件里的devDependencies中的所有插件 var plugins = require(‘gulp-load-plugins‘)(); // HTML处理 gulp.task(‘html‘, function() { gulp.src(["html/h5/**/*.html","html/pc/**/*.html"]) .pipe(livereload(server)) .pipe(gulp.dest("dest")) }); //图片处理 gulp.task(‘images‘, function(){ gulp.src([‘html/h5/**/images/*‘,‘html/pc/**/images/*‘]) //.pipe(imagemin()) .pipe(livereload(server)) .pipe(gulp.dest("dest")); }) //压缩js gulp.task(‘minifyjs‘, function() { return gulp.src([‘html/h5/**/js/*.js‘,‘html/pc/**/js/*.js‘]) .pipe(uglify()) //压缩 .pipe(livereload(server))//网页自动刷新 .pipe(gulp.dest(‘dest‘)); //输出 }); //压缩css gulp.task(‘minifycss‘, function() { return gulp.src([‘html/h5/**/css/*.css‘,‘html/pc/**/css/*.css‘]) //压缩的文件 //.pipe(rename({ suffix: ‘.min‘ })) .pipe(minifycss())//执行压缩 .pipe(livereload(server))//网页自动刷新 .pipe(gulp.dest(‘dest‘))//输出文件夹 }); // 清空图片、样式、js gulp.task(‘clean‘, function() { gulp.src([‘dest/css/‘, ‘dest/js/‘, ‘dest/images/‘,‘dest/*.html‘,‘dest/*/‘], {read: false}) .pipe(clean()); }); // 代理 gulp.task(‘browser-sync‘, function() { browserSync.init({ proxy: "10.2.31.189:8080"//当前ip }); }); // 静态服务器 gulp.task(‘ls-browser-sync‘, function() { browserSync.init({ server: { baseDir: "./html" } }); }); // 监听css和html文件, 当文件发生变化后做些什么! gulp.task(‘serve‘, function () { // 从这个项目的根目录启动服务器 browserSync({ server: { baseDir: "./html" } }); gulp.watch("html/**/**/**/*.css").on("change", browserSync.reload);//监控css有没有更改 gulp.watch("html/**/**/*.html").on("change", browserSync.reload);//监控html有没有更改 });
标签:
原文地址:http://www.cnblogs.com/lssmd/p/5368729.html