你,不曾劝我离开。我,也不曾劝你留下。你有你的坚持,我有我的执着。我们总以为我们所做的选择都是自主的,但事实上所有的选择,都是被迫的。迫于形势,迫于压力,迫于成长带来的责任感。无奈的是,语言这东西,在表达爱意的时候如此无力;在表达伤害的时候,却又如此锋利。生命无法用来证明爱情,就像我们无法证明自己可以不再相信爱情。不要因为众生的愚疑,而带来了自己的烦恼。不要因为众生的无知,而痛苦了你自己。在这个城市里,诚如劳力士是物质的奢侈品,爱情则是精神上的奢侈品。可是生命脆弱无比,根本没办法承受那么多的奢侈。在这个世界上,不是所有合理的和美好的都能按照自己的愿望存在或实现。人们宁愿去关心一个蹩脚电影演员的吃喝拉撒和鸡毛蒜皮,而不愿了解一个普通人波涛汹涌的内心世界……
一.首先需要安装node;然后通过npm安装。
1.全局安装 npm install -g gulp ;
2.安装项目依赖的插件 npn install --save-dev gulp
二.在项目根目录下创建一个名为gulpfile.js的文件,然后配置,引用需要的插件
文件夹目录为:
dream ->
dist
demo
res ->
css ->
demo
js ->
demo
img ->
demo
src ->
demo
res ->
css ->
demo
js ->
demo
img ->
demo
var gulp = require('gulp'),
sass = require('gulp-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'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
minifyHTML = require("gulp-minify-html");
//这里是文件配置
gulp.task('js-demo',function(){
//需要编译的源代码
//配置文件路径
return gulp.src(['src/res/js/demo/demo.js'])
//js语法检测
.pipe(jshint())
.pipe(jshint.reporter('default'))
//这里可以合并需要的文件,在数组后边添加需要合并的文件
.pipe(concat(['demo.js']))
//输出文件到dist目录
.pipe(gulp.dest('dist/res/js/demo'))
//重命名文件
.pipe(rename({suffix:'.min'}))
//压缩并混淆js
.pipe(uglify({
output:{
ascii_only:true
}
}))
//输出压缩后的js
.pipe(gulp.dest('dist/res/js/demo'))
});
gulp.task('html-demo', function () {
gulp.src('src/demo/*.shtml')
.pipe(gulp.dest("dist/demo"))
});
单个任务,处理css
gulp.task("css-demo", function () {
//配置文件路径
return gulp.src('src/res/scss/demo/demo.scss')
//执行的任务 每一个pipe代表一个任务,里边的插件根据自己的需要配置
//编译sass文件
.pipe(sass({ style: 'expanded' }))
//补全属性前缀,
.pipe(autoprefixer({
browsers: ['> 1%'],
cascade: false
}))
//输出到dist目录
.pipe(gulp.dest('dist/res/css/demo'))
//重命名文件
.pipe(rename({ suffix: '.min' }))
//压缩css
.pipe(minifycss({ compatibility: 'ie8' }))
//输出文件
.pipe(gulp.dest('dist/res/css/demo'))
})
gulp.task("auto-demo", function () {
gulp.watch("src/demo/*.shtml", ['html-demo']);
gulp.watch('src/res/scss/demo/demo.scss', ['css-demo']);
gulp.watch('src/res/js/demo/demo.js', ['js-demo']);
});
2.运行gulp
可以输入 gulp xx-demo; //执行单个任务
输入 gulp auto-demo ; //自动监听
三.插件可以在项目根目录新建一个package.json的文件,然后把项目需要依赖的插件用json的格式写入;
之后通过 命令行工具进入项目根目录,执行 npm install 命令;自动安装
常见的插件和配置如下
{
"name": "dream",//项目名称
"version": "1.0.0",//项目版本
"description": "demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {//这里配置项目依赖的插件
"browser-sync": "^2.9.10",
"fd-gulp-chinese2unicode": "0.0.1",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.0.2",
"gulp-cache": "^0.3.0",
"gulp-clean": "^0.3.1",
"gulp-compass": "^2.1.0",
"gulp-concat": "^2.6.0",
"gulp-imagemin": "^2.3.0",
"gulp-jshint": "^1.11.2",
"gulp-livereload": "^3.8.1",
"gulp-minify-css": "^1.2.1",
"gulp-minify-html": "^1.0.4",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.4.1"
},
"dependencies": {
"jquery-placeholder": "^2.1.1",
"process-nextick-args": "^1.0.3"
}
}
四.可以用browsersync工具配合gulp,调试根方便配置如下:
var gulp = require('gulp'),
sass = require('gulp-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'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
browserSync = require('browser-sync'),
babel = require("gulp-babel"),
minifyHTML = require("gulp-minify-html");
//browsersync 插件需要初始化
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
//这里是文件配置
//js文件处理
gulp.task('js-demo01',function(){
return gulp.src(['src/res/js/demo01/demo01.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('*.js'))
.pipe(gulp.dest('dist/res/js/demo01'))
.pipe(rename({suffix:'.min'}))
.pipe(uglify({
output:{
ascii_only:true
}
}))
.pipe(gulp.dest('dist/res/js/demo01'))
//当文件发生变化时 插件会自动刷新页面
.pipe(browserSync.stream());
});
//html文件处理
gulp.task('html-demo01', function () {
gulp.src('src/demo01/*.html')
.pipe(gulp.dest("dist/demo01"))
.pipe(browserSync.stream());
});
//css文件处理
gulp.task("css-demo01", function () {
return gulp.src('src/res/css/demo01/*.css')
.pipe(autoprefixer({
browsers: ['> 1%'],
cascade: false
}))
.pipe(gulp.dest('dist/res/css/demo01'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss({ compatibility: 'ie8' }))
.pipe(gulp.dest('dist/res/css/demo01'))
.pipe(browserSync.stream());
})
// 静态服务器
//监听项目所有的任务
gulp.task('demo01',function() {
//browsersync 服务器初始化
browserSync.init({
//配置文件夹根目录
server: {
baseDir: "dist",
directory: true
}
});
//执行任务的时候 browsersync 执行reload
gulp.watch("src/demo01/*.html", ['html-demo01']).on('change', browserSync.reload);
gulp.watch('src/res/css/demo01/*.css', ['css-demo01']).on('change', browserSync.reload);
gulp.watch('src/res/js/demo01/demo01.js', ['js-demo01']).on('change', browserSync.reload);
});
最后在命行输入 gulp auto-demo;执行任务