Gulp
从npm安装
1 :
npm install --global gulp
//全局安装
2 :
npm install --save-dev gulp
//在项目中安装
3 :
//在项目根目录创建一个 gulpfile.js,在这个文件中书写代码
var gulp=require('gulp')
gulp.task('default',function(){
//这里写你的代码
})
4 :
//npm 运行
gulp
已经算是可以开始入门了,下面咱们写点有意思的;
npm 需要下载的统一放在这里
压缩JS代码 : npm install --save-dev gulp-uglify
压缩CSS : npm install --save-dev gulp-minify-css
压缩HTML : npm install --save-dev gulp-minify-html
合并JS : npm install --save-dev gulp-concat
编译LESS : npm install --save-dev gulp-less
编译SASS : npm install --save-dev gulp-sass
热加载 : npm install --save-dev gulp-livereload
压缩JS :
// 代码 :
var gulp=require('gulp')
//引入unlify引擎
var gulify=require('gulp-uglify')
//定义压缩JS代码任务
gulp.task('yasuo',function(){
gulp.src(['js/index.js','!js/*.ming.js']) // 参数1 : 获取路径, 参数2 : 避免压缩的JS文件
.pipe(uglify()) // 执行压缩代码命令
.pipe(gulp.dest('src/')) // 输出文件
console.log('压缩JS代码完毕')
})
压缩CSS
// 代码
var minify=require('gulp-minify-css')
gulp.task('yscss',function () {
//获取文件
gulp.src(['src/*.css','!src/css/*.min.css'])
.pipe(minify())
.pipe(gulp.dest('src'))
console.log('压缩CSS代码完毕')
})
压缩html
var gulp = require('gulp');
var htmlmini = require('gulp-minify-html');
gulp.task('htmlmini', function () {
gulp.src('*.html')
.pipe(htmlmini())
.pipe(gulp.dest('minihtml'));
})
合并JS代码
//JS合并
var concat=require('gulp-concat')
gulp.task('gulp:concat',function () {
gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'))
})
编译LESS
//编译LESS
gulp.task('less',function () {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'))
})
编译SASS
gulp.task('compile-sass', function () {
gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
热加载
//当代码变化时，它可以帮助我们自动刷新页面，该插件最好配合谷歌浏览器，且要安装livereload chrome extension扩展插件，否则无效。
var gulp = require('gulp'),
less = require('gulp-less'),
livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen(); //要在这里调用listen()方法
gulp.watch('less/*.less', ['less']); //监听目录下的文件，若文件发生变化，则调用less任务。
});
