gulp安裝
1.在系統(tǒng)安裝(全局安裝)：
? ? ? npm install gulp-cli -g
2.在文件中安裝：
? ? ? npm init -y ?安裝后出現(xiàn)json文件
? ? ? npm install -save-dev gulp gulp-util ?安裝后出現(xiàn)node_modules文件夾
3.創(chuàng)建gulpfile.js文件并寫入：
? ? var gulp = require('gulp');
? ? gulp.task('default', function() {
? ? //寫自己的代碼
? ? });
? ? 輸入gulp命令看是否安裝成功
gulp使用
html文件壓縮
命令：npm install --save-dev gulp-minify-html
樣例：var gulp = require('gulp'),
? ? ? ? ? ?minifyHtml = require("gulp-minify-html");
? ? ? ? ? ?gulp.task('myminifyhtml', function () {
? ? ? ? ? ? ? ? ? ? ?gulp.src('*.html') //要壓縮的html文件
? ? ? ? ? ? ? ? ? ? .pipe(minifyHtml()) //調(diào)用壓縮
? ? ? ? ? ? ? ? ? ? .pipe(gulp.dest('dist/html'))//壓縮到哪
? ? ? ? ? ? ? ? ? ? .pipe(connect.reload());//時時監(jiān)聽
? ? ? ? ? ?});
? ? ? ? ? ?gulp.task('default',['myminifyhtml']);
css文件壓縮
命令：npm install gulp-minify-css --save-dev
? ? ? ? ? ?npm install --save-devgulp-clean-oss
樣例：var gulp = require('gulp'),
? ? ? ? ? ?cssmin = require('gulp-minify-css');
? ? ? ? ? ?gulp.task('myminifycss', function () {
? ? ? ? ? ? ? ? ? ? gulp.src('css/*.css') //要壓縮的css文件
? ? ? ? ? ? ? ? ? ? .pipe(cssmin()) //調(diào)用壓縮
? ? ? ? ? ? ? ? ? ? .pipe(gulp.dest('dist/css')) //壓縮到哪
? ? ? ? ? ? ? ? ? ? .pipe(connect.reload()); //時時監(jiān)聽?
? ? ? ? ? ?});
? ? ? ? ? ?gulp.task('default',['myminifycss']);
js文件合并壓縮插件
命令：npm install --save-dev gulp-uglify gulp-concat
樣例：var gulp = require('gulp'),
? ? ? ? ? ?uglify=require('gulp-uglify'),
? ? ? ? ? ?concat=require('gulp-concat');
? ? ? ? ? ?gulp.task('myjs', function(){
? ? ? ? ? ? ? ? ? ? gulp.src('js/*.js') //要合并壓縮的js文件
? ? ? ? ? ? ? ? ? ? .pipe(uglify()) //調(diào)用壓縮
? ? ? ? ? ? ? ? ? ? .pipe(concat('all.js')) //合并所有js文件
? ? ? ? ? ? ? ? ? ? .pipe(gulp.dest('dist/myjs')) //壓縮到哪
? ? ? ? ? ? ? ? ? ? .pipe(connect.reload()); //時時監(jiān)聽
? ? ? ? ? ?});
? ? ? ? ? ?gulp.task('default',['myjs']);
自動監(jiān)聽自動刷新
命令：npm install --save-dev gulp-livereload
? ? ? ? ? ?npm install --save-dev gulp-connect
樣例：connect = require('gulp-connect');
? ? ? ? ? ?livereload = require('gulp-livereload');
? ? ? ? ? ?//自動監(jiān)聽
? ? ? ? ? ?gulp.task('watch', function () {
? ? ? ? ? ? ? ? ? ? ?gulp.watch('*.html', ['myminifyhtml']);
? ? ? ? ? ? ? ? ? ? ?gulp.watch('js/*.js', ['myjs']);
? ? ? ? ? ? ? ? ? ? ?gulp.watch('css/*.css', ['myminifycss']);
? ? ? ? ? ? });
? ? ? ? ? ? //設(shè)置刷新服務(wù)
? ? ? ? ? ? gulp.task('connect', function () {
? ? ? ? ? ? ? ? ? ? ?connect.server({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?host: 'localhost', //地址芹橡，可不寫，不寫的話，默認(rèn)localhost
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?port: 8020, //端口號岔霸，可不寫沃粗，默認(rèn)8000
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?root: './', //當(dāng)前項目主目錄
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?livereload: true //自動刷新
? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ?});
? ? ? ? ? ? ?gulp.task('default',['watch','connect']);
具體代碼參考以下
? ? ? ? ? ? ?//定義依賴項和插件
? ? ? ? ? ? ?var gulp=require('gulp'),
? ? ? ? ? ? ?gutil=require('gulp-util'),
? ? ? ? ? ? ?uglify=require('gulp-uglify'),
? ? ? ? ? ? ?cssmin = require('gulp-minify-css'),
? ? ? ? ? ? ?minifyHtml = require("gulp-minify-html"),
? ? ? ? ? ? ?rename = require('gulp-rename'),
? ? ? ? ? ? ?connect = require('gulp-connect');
? ? ? ? ? ? ?livereload = require('gulp-livereload');
? ? ? ? ? ? ?//定義名為"js"的任務(wù)
? ? ? ? ? ? ?gulp.task('uglifyjs', function(){
? ? ? ? ? ? ? ? ? ? ? gulp.src('js/*.js')
? ? ? ? ? ? ? ? ? ? ?.pipe(uglify())
? ? ? ? ? ? ? ? ? ? ?.pipe(gulp.dest('dist/js'))
? ? ? ? ? ? ? ? ? ? ?.pipe(connect.reload());
? ? ? ? ? ? ?});
? ? ? ? ? ? ?gulp.task('testCssmin', function () {
? ? ? ? ? ? ? ? ? ? ? gulp.src('css/index1.css')
? ? ? ? ? ? ? ? ? ? ? .pipe(cssmin())
? ? ? ? ? ? ? ? ? ? ? .pipe(rename('aaaa.css'))
? ? ? ? ? ? ? ? ? ? ? .pipe(gulp.dest('dist/css'))
? ? ? ? ? ? ? ? ? ? ? .pipe(connect.reload());
? ? ? ? ? ? ?});
? ? ? ? ? ? ?gulp.task('minify-html', function () {
? ? ? ? ? ? ? ? ? ? ? ?gulp.src('*.html') //要壓縮的html文件
? ? ? ? ? ? ? ? ? ? ? ?.pipe(minifyHtml()) //壓縮
? ? ? ? ? ? ? ? ? ? ? ?.pipe(gulp.dest('dist/html'))
? ? ? ? ? ? ? ? ? ? ? ?.pipe(connect.reload());
? ? ? ? ? ? ?});
? ? ? ? ? ? ?//自動監(jiān)聽
? ? ? ? ? ? ?gulp.task('watch', function () {
? ? ? ? ? ? ? ? ? ? ?gulp.watch('*.html', ['minify-html']);
? ? ? ? ? ? ? ? ? ? ?gulp.watch('js/*.js', ['uglifyjs']);
? ? ? ? ? ? ? ? ? ? ?gulp.watch('css/*.css', ['testCssmin']);
? ? ? ? ? ? ?});
? ? ? ? ? ? ?//設(shè)置刷新服務(wù)
? ? ? ? ? ? ?gulp.task('connect', function () {
? ? ? ? ? ? ? ? ? ? ?connect.server({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?host: 'localhost', //地址挂绰，可不寫抛腕，不寫的話堤尾，默認(rèn)localhost
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?port: 8020, //端口號肝劲，可不寫，默認(rèn)8000
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?root: './', //當(dāng)前項目主目錄
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?livereload: true //自動刷新
? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ?});
? ? ? ? ? ? ?//定義默認(rèn)任務(wù)
? ? ? ? ? ? ?gulp.task('default', ['uglifyjs','testCssmin','minify-html','watch','connect']);
