我正和Grunt一起做项目。该项目有2个部分:开发和构建。 开发部分没有问题,但构建部分出错了。
我认为我的gruntfiles.js文件存在严重问题。
以下是它的内容:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// define reusable paths
paths: {
app: 'app',
dist: 'dist',
app_css:'<%= paths.app %>/css',
app_js:'<%= paths.app %>/js',
app_img: '<%= paths.img %>/img'
source_scss: '<%= paths.app %>/src/scss',
source_js: '<%= paths.app %>/src/js',
source_bower: '<%= paths.app %>/src/bower',
dist_css: '<%= paths.dist %>/css',
dist_js: '<%= paths.dist %>/js',
dist_img: '<%= paths.dist %>/img'
},
sass: {
dev: {
options: {
outputStyle: 'expanded',
sourceMap: false
},
files: {
'<%= paths.app_css %>/styles.css': '<%= paths.source_scss %>/app.scss'
}
},
build: {
options: {
outputStyle: 'compressed',
sourceMap: false
},
files: {
'<%= paths.dist_css %>/styles.css': '<%= paths.app_scss %>/styles.scss'
}
}
},
browserSync: {
files: {
src: ['<%= paths.app_css %>/*.css', '<%= paths.app_js %>/*.js', '<%= paths.app %>/*.html']
},
options: {
browser: 'firefox',
server: '<%= paths.app %>',
watchTask: true
}
},
watch: {
sass: {
files: ['<%= paths.source_scss %>/**/*.scss'],
tasks: ['sass:dev', 'concat:css']
},
js: {
files: ['<%= paths.source_js %>/*.js'],
tasks: ['jshint', 'uglify:dev']
}
},
jshint: {
dev: {
files: {
src: '<%= paths.source_js %>/*.js'
}
},
options: {
reporter: require('jshint-stylish')
}
},
bower: {
dev: {
dest: '<%= paths.source_bower %>',
js_dest: '<%= paths.source_bower %>/js',
css_dest: '<%= paths.source_bower %>/styles'
}
},
copy: {
html: {
expand: true,
cwd: '<%= paths.app %>',
src: '*.html',
dest: '<$= paths.dist $>/',
options: {
process: function(content, srcpath){
return content.replace('scripts.js', 'scripts.min.js')
}
}
}
},
clean: {
dist: {
src: '<%= paths.dist %>/css'
}
},
imagemin: {
build: {
files: [
{
expand: true,
cwd: '<%= paths.app_img %>',
src: ['<%= **/*.{png,jpg,gif,svg,ico}'],
dest: '<%= paths.dist_img %>'
}
]
}
},
concat: {
css: {
src: ['<%= paths.app_css %>/styles.css', '<%= paths.source_bower %>/styles/**/*.css'],
dest: '<%= paths.app_css %>/styles.css'
}
},
uglify: {
dev: {
options: {
beautify: true,
mangle: false,
compress: false,
preserveComments: 'all'
},
src: ['<%= paths.source_js %>/*.js', '<%= paths.source_bower %>/js/**/*.js'],
dest: '<%= paths.app_js %>/scripts.js'
},
build: {
src: ['<%= paths.source_js %>/*.js', '<%= paths.source_bower %>/js/**/*.js'],
dest: '<%= paths.dist_js %>/scripts.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
// Browser sync
grunt.loadNpmTasks('grunt-browser-sync');
// Sass
grunt.loadNpmTasks('grunt-sass');
// Contribu watch
grunt.loadNpmTasks('grunt-contrib-watch');
// Jshint
grunt.loadNpmTasks('grunt-contrib-jshint');
// Bower
grunt.loadNpmTasks('grunt-bower');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
//Creat tasks
// Default task(s).
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('build', ['clean:dist', 'copy', 'imagemin', 'uglify:build', 'concat:css', 'sass:build']);
};
这是我的package.json文件:
{
"name": "dev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-bower": "^0.21.4",
"grunt-browser-sync": "^2.2.0",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-imagemin": "^1.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-uglify": "^2.2.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-sass": "^2.0.0",
"jshint-stylish": "^2.2.1"
}
}
运行时
grunt build
我收到了这个错误:
Loading "gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "build" not found. Use --force to continue.
我的项目文件:
├── css
│ └── styles.css
├── img
│ └── Screenshot from 2017-03-31 22-23-33.png
├── index.html
├── js
│ └── scripts.js
├── src
│ ├── bower
│ │ ├── js
│ │ │ └── dist
│ │ │ └── jquery.js
│ │ └── styles
│ │ └── normalize.css
│ ├── js
│ │ └── scripts.js
│ └── scss
│ └── app.scss
└── terminal.glue
请你帮我解决这个问题!
非常感谢你!
答案 0 :(得分:0)
你好像错过了一个逗号:
// define reusable paths
paths: {
app: 'app',
dist: 'dist',
app_css:'<%= paths.app %>/css',
app_js:'<%= paths.app %>/js',
app_img: '<%= paths.img %>/img' // <---------------------miss here
source_scss: '<%= paths.app %>/src/scss',
source_js: '<%= paths.app %>/src/js',
source_bower: '<%= paths.app %>/src/bower',
尝试使用jshint / jslint(等)来避免编辑或ide这样的问题。